Brand logoentauri

Add this component

npx zentauri-ui add speech-recognition

Accessibility notes

Keyboard accessible by default with semantic markup, visible focus treatment, and tokenized states. Add descriptive labels for icon-only or decorative usage.

Dependency notes

Check Installation for shared peers. This component keeps styling in Tailwind classes and the --zui-* token contract.

Media

Speech Recognition for voice input

Use the speech recognition component to capture voice input in the browser. Built on the Web Speech API, it provides real-time transcription with interim and final results, configurable language, and a toggleable microphone button.

Click to start listening
Click to start listening
Click to start listening

Speech recognition variants playground

Pick an appearance and size to preview the speech recognition component live. Toggle Show output / Show code and the snippet updates to match the selected variant.

Click to start listening

All appearances

Every shipped appearance token at a glance. Click any swatch to load it into the playground above.

default
Click to start listening
subtle
Click to start listening
muted
Click to start listening
primary
Click to start listening
blue
Click to start listening
cyan
Click to start listening
green
Click to start listening
lime
Click to start listening
emerald
Click to start listening
indigo
Click to start listening
purple
Click to start listening
pink
Click to start listening
rose
Click to start listening
sky
Click to start listening
teal
Click to start listening
yellow
Click to start listening
orange
Click to start listening
red
Click to start listening
slate
Click to start listening
gray
Click to start listening
zinc
Click to start listening

Speech Recognition API

Generated from the package prop types and variant definitions.

SpeechRecognition

SpeechRecognitionProps

Variants

PropTypeDefault
size
lgmdsm
md

Behavior

PropTypeDefault
appearance'default' | 'blue' | 'cyan' | 'green' | 'lime' | 'red' | 'slate' | 'zinc' | 'sky' | 'rose' | 'purple' | 'pink' | 'orange' | 'yellow' | 'teal' | 'indigo' | 'emerald' | 'gray' | 'subtle' | 'muted' | 'primary' | null | undefinednone
autoStartboolean | undefinednone
continuousboolean | undefinednone
interimResultsboolean | undefinednone
langstring | undefinednone
onError((error: string) => void) | undefinednone
onResult((result: SpeechRecognitionResult) => void) | undefinednone
onStateChange((state: SpeechRecognitionState) => void) | undefinednone
renderMic((props: { isListening: boolean; state: SpeechRecognitionState; }) => React.ReactNode) | undefinednone

Content

PropTypeDefault
childrenReactNodenone
Inherited HTML props
PropTypeDefault
classNamestring | undefinednone
idstring | undefinednone
onClickMouseEventHandler<HTMLDivElement> | undefinednone
styleCSSProperties | undefinednone
titlestring | undefinednone

SpeechRecognitionVariant

SpeechRecognitionVariantProps

Behavior

PropTypeDefault
appearance'default' | 'blue' | 'cyan' | 'green' | 'lime' | 'red' | 'slate' | 'zinc' | 'sky' | 'rose' | 'purple' | 'pink' | 'orange' | 'yellow' | 'teal' | 'indigo' | 'emerald' | 'gray' | 'subtle' | 'muted' | 'primary' | null | undefinednone
size'md' | 'sm' | 'lg' | null | undefinednone

SpeechRecognitionAnimated

SpeechRecognitionAnimatedProps

animated

Behavior

PropTypeDefault
animationSpeechRecognitionAnimation | undefinednone
appearance'default' | 'blue' | 'cyan' | 'green' | 'lime' | 'red' | 'slate' | 'zinc' | 'sky' | 'rose' | 'purple' | 'pink' | 'orange' | 'yellow' | 'teal' | 'indigo' | 'emerald' | 'gray' | 'subtle' | 'muted' | 'primary' | null | undefinednone
autoStartboolean | undefinednone
continuousboolean | undefinednone
interimResultsboolean | undefinednone
langstring | undefinednone
onError((error: string) => void) | undefinednone
onResult((result: SpeechRecognitionResult) => void) | undefinednone
onStateChange((state: SpeechRecognitionState) => void) | undefinednone
refAllows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).Ref<HTMLDivElement> | undefinednone
renderMic((props: { isListening: boolean; state: SpeechRecognitionState; }) => React.ReactNode) | undefinednone
size'md' | 'sm' | 'lg' | null | undefinednone

Content

PropTypeDefault
childrenReactNodenone
Inherited HTML props
PropTypeDefault
classNamestring | undefinednone
idstring | undefinednone
onClickMouseEventHandler<HTMLDivElement> | undefinednone
styleCSSProperties | undefinednone
titlestring | undefinednone
CSS variable overrides

Speech Recognition CSS variables

Override these speech recognition variables on :root, a theme selector, or a component wrapper.

50 variables

Pattern: --zui-<component>-<slot?>-<variant?>-<property>-<state?>-dark?

:root {
  --zui-speech-recognition-default-btn-bg: oklch(20.8% 0.042 265.755);
  --zui-speech-recognition-subtle-btn-bg: oklch(92.9% 0.013 255.508);
  --zui-speech-recognition-muted-btn-bg: oklch(44.6% 0.043 257.281);
  --zui-speech-recognition-primary-btn-bg: oklch(20.8% 0.042 265.755);
  --zui-speech-recognition-blue-btn-bg: #2563eb;
  --zui-speech-recognition-cyan-btn-bg: #0891b2;
  --zui-speech-recognition-green-btn-bg: #16a34a;
  --zui-speech-recognition-lime-btn-bg: #65a30d;
  --zui-speech-recognition-emerald-btn-bg: oklch(69.6% 0.17 162.48);
  --zui-speech-recognition-indigo-btn-bg: oklch(39.8% 0.195 277.366);
  --zui-speech-recognition-purple-btn-bg: oklch(43.8% 0.218 303.724);
  --zui-speech-recognition-pink-btn-bg: oklch(45.9% 0.187 3.815);
  --zui-speech-recognition-rose-btn-bg: oklch(64.5% 0.246 16.439);
  --zui-speech-recognition-sky-btn-bg: oklch(68.5% 0.169 237.323);
  --zui-speech-recognition-teal-btn-bg: oklch(70.4% 0.14 182.503);
  --zui-speech-recognition-yellow-btn-bg: oklch(79.5% 0.184 86.047);
  --zui-speech-recognition-orange-btn-bg: oklch(70.5% 0.213 47.604);
  --zui-speech-recognition-red-btn-bg: #dc2626;
  --zui-speech-recognition-slate-btn-bg: #475569;
  --zui-speech-recognition-gray-btn-bg: oklch(55.1% 0.027 264.364);
  --zui-speech-recognition-zinc-btn-bg: #52525b;
  --zui-speech-recognition-btn-fg: #ffffff;
  --zui-speech-recognition-status-fg: oklch(44.6% 0.043 257.281);
  --zui-speech-recognition-transcript-fg: oklch(20.8% 0.042 265.755);
  --zui-speech-recognition-active-ring: #dc2626;
}

/* Dark theme variables follow the same names with -dark appended. */
.dark {
  --zui-speech-recognition-default-btn-bg-dark: oklch(98.4% 0.003 247.858);
  --zui-speech-recognition-subtle-btn-bg-dark: oklch(27.9% 0.041 260.031);
}

Composition and API

The Speech Recognition component wraps the browser's SpeechRecognition API (webkitSpeechRecognition on Chromium). It exposes start, stop, and abort methods via an imperative ref handle. The component provides onResult, onError, and onStateChange callbacks for integrating speech results into your application state.

Accessibility

The microphone toggle button uses aria-label and aria-pressed attributes to convey listening state. Status text updates in real time. Ensure you provide visible labels and fallback input methods for users who cannot or choose not to use voice input.

Next.js integration notes

The Web Speech API is browser-only. Import the component via dynamic import with ssr: false to avoid server-side errors. The component handles SSR safety internally with a typeof window guard, but dynamic import is recommended for Next.js apps.

FAQ

Which browsers support speech recognition?

The Web Speech API is supported in Chromium-based browsers (Chrome, Edge, Brave). Firefox and Safari have limited or no support. Always provide a fallback for unsupported browsers.

Does the component require a microphone permission?

Yes. The browser will prompt the user for microphone access when speech recognition starts. The component handles permission errors via the onError callback.

Can I use multiple languages?

Yes. Set the lang prop to any BCP 47 language tag (e.g., 'en-US', 'es-ES', 'fr-FR'). The browser will use the language for recognition.