Combobox
ListensComboBox@listenssoft/speechui-reactA filterable select with a spoken trigger word: “destination” opens it, “Mars” picks it.
The command word toggles the dropdown. While it's open, spoken words match options (aliases included) — a full match selects and closes; a partial match narrows the visible list, so “euro” filters to Europa. Saying “clear” shortly after the command empties the selection. Typing filters exactly the same way.
Basic combobox
Loading the React kit…
Hold anywhere and say:“destination”“destination mars”“clear (after the command)”
Props
- default false
- default command
React
Updates as you tick propsimport { ListensComboBox } from "@listenssoft/speechui-react";import { useState } from "react";
function Demo() { const [destination, setDestination] = useState(""); return ( <ListensComboBox label="Destination" command="destination" options={["Luna", "Mars", "Europa", "Titan", "Ganymede"]} placeholder="Choose a destination…" value={destination} onChange={setDestination} /> );}What you can say
| Say | Effect |
|---|---|
| “destination” | Toggles the dropdown. If it was already open with nothing after the word, a brief close-delay runs — you might be about to name an option. |
| “destination mars” | Opens and selects Mars in one phrase. |
| “europa (while open)” | Selects it. Speech only matches options while the dropdown is open — a closed box ignores stray speech. |
| “euro (while open)” | No full match: narrows the list to options containing the fragment. |
| “clear” | Empties the selection — recognized within ~8 seconds of the command word. |
The dropdown never opens from stray speech: only the command word, autoOpenOnListening, or a click opens it.
API reference
React props for @listenssoft/speechui-react.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
placeholder | string | — | Input placeholder. |
autoOpenOnListening | boolean | false | Open the dropdown when listening starts — only when no value is selected yet. |
listeningContent | ReactNode | command | Content shown as the label while the mic is open — a place for a hint like “say: volume to seventy”. |
Extra props
| Prop | Type | Default | Description |
|---|---|---|---|
options* | string[] | — | The selectable options. |
value | string | — | Controlled value (the input reflects it). |
onChange | (value: string) => void | — | Called on select and on clear (with ""). |
command | string | label | The spoken trigger word that toggles the dropdown. Give one to a combobox without a visible label. |
label | string | — | Visible label; the command fallback. |
aliases | Record<string, string[]> | — | Spoken aliases per option, e.g. { Mr: ["Mister"] }. |
className | string | — | Extra class name(s) on the root. |
classNames | ListensComboBoxClassNames | — | Per-part class overrides (label, listeningLabel, input, dropdown, option). Each is appended after the component's own classes, so your rules win without extra specificity. |
Styling hooks
classNames parts and CSS classes
| Hook | Type | Default | Description |
|---|---|---|---|
classNames.input / .listens-combobox-input | class | — | The text input. |
classNames.dropdown / .listens-combobox-options | class | — | The dropdown listbox (ul). data-open marks the open state on the root. |
classNames.option / .listens-combobox-option | class | — | Each option (li). |
.listens-combobox | class | — | Root element (also -toggle, -no-results parts). |
Behavior notes
- All frameworks: The close-delay timer (≈1.5s after a bare command word) lives in the component; the interpreter is told when it fires so debouncing stays correct.
