Checkbox
ListensCheckbox@listenssoft/speechui-reactMulti select by voice: “toppings cheese and olives” toggles both.
A checkbox group holding a string[]. Speech toggles each option once per time it is spoken: “toppings cheese” checks Cheese; saying “cheese” again in the same breath unchecks it. Occurrence counting keeps interim recognition flutter from double-toggling.
Basic multi select
Loading the React kit…
Hold anywhere and say:“toppings mushrooms”“toppings cheese and olives”
Props
- default command
- default false
React
Updates as you tick propsimport { ListensCheckbox } from "@listenssoft/speechui-react";import { useState } from "react";
function Demo() { const [toppings, setToppings] = useState(["Cheese"]); return ( <ListensCheckbox label="Toppings" command="toppings" options={["Cheese", "Mushrooms", "Olives", "Peppers"]} value={toppings} onChange={setToppings} /> );}What you can say
| Say | Effect |
|---|---|
| “toppings mushrooms” | Toggles Mushrooms. |
| “toppings cheese and olives” | Toggles both — every matched option in the remainder toggles. |
| “toppings cheese … cheese” | Checks Cheese, then unchecks it: each spoken occurrence is one toggle. |
| “…add mushrooms to the toppings…” | Works too — the command may appear anywhere; everything after it is matched. |
A new utterance (after a pause) starts fresh, so repeating “toppings cheese” later toggles again. Aliases work exactly as on the radio group.
API reference
React props for @listenssoft/speechui-react.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
listeningContent | ReactNode | command | Content shown as the group label while the mic is open — a place for a hint like “say: volume to seventy”. |
disabled | boolean | false | Disables the checkboxes. |
Extra props
| Prop | Type | Default | Description |
|---|---|---|---|
options* | string[] | — | The options, rendered as checkboxes in order. |
command | string | label | The spoken prefix; options after it toggle. |
label | string | — | Group label; the command fallback. |
value | string[] | — | Controlled checked values. |
onChange | (values: string[]) => void | — | Called with the next checked set — click or speech. |
onMatch | (values: string[]) => void | — | Called when speech toggles options. |
aliases | Record<string, string[]> | — | Spoken aliases per option value, e.g. { "T&C": ["terms"] }. |
className | string | — | Extra class name(s) on the root. |
classNames | ListensCheckboxClassNames | — | Per-part class overrides (label, listeningLabel, group, 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.group / .listens-checkbox-group | class | — | The wrapper around the options. |
classNames.option / .listens-checkbox-option | class | — | Each option label (wrapping its checkbox). |
classNames.label / .listens-checkbox-label | class | — | The group label. |
--listens-interactive | token | — | The checkbox accent color. |
Behavior notes
- All frameworks: Unlike the radio group, the checkbox matches the command anywhere in the phrase (contains), then matches everything after it.
