Input (bare)
ListensInput@listenssoft/speechui-reactA plain native input that takes dictation — zero kit markup, zero kit styles. Yours to design.
Same speech behavior as the text field — claim on a starts-with match, stream the remainder into the value filtered by type, contains fallback, onMatch flushed once on stop — rendered as exactly one native element with nothing added. While the mic is open the element carries data-listening.
Your input, our dictation
All visible styling belongs to the sample; the kit adds only behavior.
Loading the React kit…
Hold anywhere and say:“callsign rocinante”“callsign apollo”
Props
- not set
- not set
React
Updates as you tick propsimport { ListensInput } from "@listenssoft/speechui-react";import { useState } from "react";
function Demo() { const [callsign, setCallsign] = useState(""); return ( <label style={{ display: "grid", gap: 4 }}> Callsign <ListensInput command="callsign" label="Callsign" type="letters" value={callsign} onChange={(e) => setCallsign(e.target.value)} onMatch={setCallsign} style={{ padding: "8px 10px", border: "1px solid #888", borderRadius: 6, font: "inherit", }} /> </label> );}What you can say
| Say | Effect |
|---|---|
| “callsign rocinante” | Starts-with match: streams “rocinante” into the value (filtered by type). |
| “the callsign is rocinante” | Contains fallback: sets the value to the words after the command (“is rocinante”) if nothing else claimed the phrase. |
See the text field for the full dictation semantics — they are identical by design.
API reference
React props for @listenssoft/speechui-react.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
type | ListensTextValueType | — | Speech filter; where it's a real HTML type (email, number, url, date) it also renders as that input type. The filter-only values letters and name render as type="text". |
Extra props
| Prop | Type | Default | Description |
|---|---|---|---|
command | string | label | The spoken prefix that starts dictation. |
label | string | — | Contract label and command fallback. Not rendered — pair the input with your own <label>. |
onMatch | (value: string) => void | — | Fires once when listening stops, with the final accumulated value. |
…InputHTMLAttributes (minus type) | input props | — | value, onChange, placeholder, className, style — a plain <input>, everything native applies. |
Styling hooks
Styling hooks
| Hook | Type | Default | Description |
|---|---|---|---|
(none added) | — | — | No classes, no wrapper, no label markup. |
data-listening | attribute | — | Present while the mic is open — style it with Tailwind's data-listening: variant or [data-listening]. |
