Toggle
ListensToggle@listenssoft/speechui-reactAn on/off switch that flips when its command is heard: “dark mode”.
Speaking the command toggles the switch — the same trigger pattern as a button, applied to a boolean. Clicking and keyboard toggling work as on any switch, speech or no speech.
Basic toggle
Loading the React kit…
Hold anywhere and say:“dark mode”
Props
- default Leading
- default command
- default false
React
Updates as you tick propsimport { ListensToggle } from "@listenssoft/speechui-react";import { useState } from "react";
function Demo() { const [enabled, setEnabled] = useState(false); return ( <ListensToggle label="Dark mode" command="dark mode" checked={enabled} onChange={setEnabled} /> );}Bare mode (React)
React-only: bare renders just the underlying checkbox input so a parent supplies the visual switch — for Tailwind switches and design systems. className, id, and name forward to the input.
Loading the React kit…
Hold anywhere and say:“autopilot”
React
import { ListensToggle } from "@listenssoft/speechui-react";import { useState } from "react";
// bare mode: only the hidden checkbox is rendered — the parent supplies// the visual switch (here: a plain CSS pill driven by :checked).function Demo() { const [on, setOn] = useState(false); return ( <label style={{ display: "inline-flex", gap: 10, alignItems: "center" }}> <ListensToggle bare command="autopilot" label="Autopilot" checked={on} onChange={setOn} /> <span>Autopilot is {on ? "on" : "off"}</span> </label> );}What you can say
| Say | Effect |
|---|---|
| “dark mode” | Toggles the switch once. |
| “…turn on dark mode please…” | Also toggles — matching is contains. (The words “on/off” are not parsed; each match flips the current state.) |
| “dark mode … (again within ~1s)” | Ignored by the per-command cooldown; repeat after a brief pause to flip back. |
The toggle flips on each match rather than parsing an on/off argument — say it again to flip back. Pair it with listeningContent to show the current effect (“say: dark mode to turn off”).
API reference
React props for @listenssoft/speechui-react.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
position | HorizontalPosition | Leading | Whether the switch leads (left) or trails (right) the label. Import the HorizontalPosition enum. |
listeningContent | ReactNode | command | Content shown beside the switch while the mic is open — a place for a hint like “say: volume to seventy”. |
disabled | boolean | false | Disables the switch. |
Extra props
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Label text beside the switch; the spoken command fallback. |
command | string | label | The spoken command that toggles the switch. |
checked | boolean | false | Controlled checked state. Pair with onChange. |
onChange | (checked: boolean) => void | — | Called with the next state — click, keyboard, or speech. |
bare | boolean | false | Render only the underlying checkbox input — no label wrapper, track, or thumb — so a parent supplies the visual switch. className, id, and name forward to the input. |
id / name / style / aria-label | string · CSSProperties | — | Forwarded to the input element (style in bare mode) — pair with a parent <label htmlFor>. |
className | string | — | Extra class name(s) on the root (the input in bare mode). |
classNames | ListensToggleClassNames | — | Per-part class overrides (input, track, thumb, label, listeningLabel). 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.track / .listens-toggle-track | class | — | The switch track. |
classNames.thumb / .listens-toggle-thumb | class | — | The switch thumb. |
classNames.input / .listens-toggle-input | class | — | The visually-hidden checkbox input (the focus target). |
classNames.label / .listens-toggle-label | class | — | The label text; listeningLabel joins it while the mic is open. |
--listens-success / --listens-track / --listens-toggle-thumb | token | — | On color, off track color, and thumb color. |
Behavior notes
- React:
baremode is React-only; the equivalent elsewhere is composing your own switch with the command primitive.
