Radio group
ListensRadioGroup@listenssoft/speechui-reactSingle select by voice: “size large” picks Large.
Say the command followed by an option. The group claims the phrase only when something follows the command, then matches the remainder against options as whole words — longest matching phrase wins, so “Very Satisfied” beats “Satisfied” when both fit. aliases map spoken words to option values, which is how “standard” selects STD.
Basic single select
Loading the React kit…
Hold anywhere and say:“size large”“size small”
Props
- default command
- default false
import { ListensRadioGroup } from "@listenssoft/speechui-react";import { useState } from "react";
function Demo() { const [size, setSize] = useState("Medium"); return ( <ListensRadioGroup label="Size" command="size" options={["Small", "Medium", "Large"]} value={size} onChange={setSize} /> );}Aliases for spoken names
Option values are often codes or abbreviations nobody would say aloud. aliases maps each value to the phrases people actually speak.
Loading the React kit…
Hold anywhere and say:“shipping express”“shipping overnight”
import { ListensRadioGroup } from "@listenssoft/speechui-react";import { useState } from "react";
function Demo() { const [shipping, setShipping] = useState("STD"); return ( <ListensRadioGroup label="Shipping" command="shipping" options={["STD", "EXP", "PRI"]} aliases={{ STD: ["standard", "regular"], EXP: ["express", "fast"], PRI: ["priority", "overnight"], }} value={shipping} onChange={setShipping} /> );}What you can say
| Say | Effect |
|---|---|
| “size large” | Selects “Large”. The command must lead the phrase, with the option after it. |
| “size extra large” | Selects the longest option whose words all appear — “Extra Large” beats “Large” when both are options. |
| “shipping overnight” | Aliases resolve to their option value (“overnight” → PRI). |
| “large (alone)” | No effect — without the leading command the group never claims the phrase. |
Matching is whole-word: “size l” matches nothing, and stray words around the option are fine (“size large please”).
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 radios. |
Extra props
| Prop | Type | Default | Description |
|---|---|---|---|
options* | string[] | — | The selectable values, rendered as radios in order. |
command | string | label | The spoken prefix; “<command> <option>” selects. |
label | string | — | Group label; the command fallback. |
value | string | — | Controlled selected value. |
onChange | (value: string) => void | — | Called with the selected value — click or speech. |
onMatch | (value: string) => void | — | Called when speech (not clicking) selects an option. |
aliases | Record<string, string[]> | — | Spoken aliases per option value, e.g. { SM: ["small"] }. The option value is returned, not the alias. |
name | string | — | Name attribute for the radio inputs (one is generated when omitted). |
className | string | — | Extra class name(s) on the root. |
classNames | ListensRadioGroupClassNames | — | 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-radio-group-options | class | — | The wrapper around the options. |
classNames.option / .listens-radio-group-option | class | — | Each option label (wrapping its radio). |
classNames.label / .listens-radio-group-label | class | — | The group label. |
--listens-interactive | token | — | The radio accent color. |
Behavior notes
- All frameworks: The radio group uses the two-pass claim flow: it claims only when the command leads with a non-empty remainder, so “size” alone leaves the transcript for others.
