Voice Input

A microphone button that captures speech using the browser's Web Speech API and returns a transcript string via the onTranscript callback. The button pulses with a destructive style while recording. Falls back gracefully in browsers that do not support the API.

Click the mic to start recording

import { VoiceInput } from "@aetherstack/patterns"

Installation

terminal

npx aether-ui add voice-input

Import

import.tsx

import { VoiceInput } from "@aetherstack/patterns"

Usage

voice-input.tsx

import * as React from "react"
import { VoiceInput } from "@aetherstack/patterns"

export function MyVoiceInput() {
  const [value, setValue] = React.useState("")

  return (
    <div className="flex items-center gap-3">
      <input
        value={value}
        onChange={(e) => setValue(e.target.value)}
        placeholder="Type or speak…"
        className="flex-1 rounded-md border px-3 py-2 text-sm"
      />
      <VoiceInput
        onTranscript={(text) => setValue((prev) => prev + text)}
      />
    </div>
  )
}

Props

Prop	Type	Default	Description
onTranscript	(text: string) => void	—	Called with the final transcript string when speech recognition completes.
disabled	boolean	false	Disables the microphone button.
className	string	—	Additional CSS classes applied to the wrapper element.

* Required

Accessibility

→The microphone button has a dynamic aria-label: "Start recording" when idle, "Stop recording" when active.
→The recording state is communicated visually via pulsing animation and the MicOff icon change.
→Users who cannot use voice input can dismiss or ignore the component without any side effects.
→The component requires microphone permission — browsers will prompt for it on first use.