Components

Speech Input

A compound component for capturing and transcribing audio input using the Web Speech API with real-time visualization.

🎤

'use client';

import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText } from '@kit/ui/input-group';
import { SpeechInput, SpeechInputBase, SpeechInputCancel, SpeechInputTrigger } from '@kit/ui/speech-input';

export function SpeechInputDemo() {
    return (
        <div className="flex w-full max-w-sm flex-col gap-4">
            <SpeechInput lang="en-US">
                <InputGroup className="rounded-full">
                    <InputGroupAddon className="pr-1">
                        <InputGroupText>🎤</InputGroupText>
                    </InputGroupAddon>
                    <SpeechInputBase asChild>
                        <InputGroupInput
                            placeholder="Your speech will appear here..."
                            className="!pl-1"
                            style={{ boxShadow: 'none' }}
                        />
                    </SpeechInputBase>
                    <InputGroupAddon align="inline-end">
                        <SpeechInputCancel className="size-6 rounded-full" size="xs" hideWhenNotListening />
                        <SpeechInputTrigger className="rounded-full" size="xs" />
                    </InputGroupAddon>
                </InputGroup>
            </SpeechInput>
        </div>
    );
}

Speech Input is a compound component for capturing voice input with real-time transcription and animated audio visualization. Built on the Web Speech API with Radix design system principles.

Features

Real-time transcription with interim and final results
Animated equalizer showing audio activity
Flexible composition using Radix compound components
Browser support detection with graceful fallbacks
Language support with customizable locales
Callback hooks for lifecycle events
Keyboard editable input field
Cancellation support to discard transcriptions

Installation

Install the following dependencies:


pnpm add motion

Make sure that the following packages are present in your project:

Radix UI Slot

Copy and paste the following code into your project.

components/ui/speech-input.tsx

'use client';

import { Button } from '@kit/ui/button';
import { Input } from '@kit/ui/input';
import { Slot } from '@radix-ui/react-slot';
import { CheckIcon, Mic, XIcon } from 'lucide-react';
import { motion } from 'motion/react';
import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';

// ============================================================================

Get the Kit

Kit required to see the full code

Update the import paths to match your project setup.

Usage

Basic Setup

import { SpeechInput, SpeechInputTrigger, SpeechInputBase, SpeechInputCancel } from '@kit/ui/speech-input';
 
<SpeechInput
    lang="en-US"
    onSpeechStart={() => console.log('Started listening')}
    onSpeechChange={(text) => console.log('Final:', text)}
>
    <SpeechInputTrigger />
    <SpeechInputCancel />
    <SpeechInputBase asChild>
        <Input placeholder="Speak or type..." />
    </SpeechInputBase>
</SpeechInput>

With Custom Components

The asChild prop lets you compose with your own components:

<SpeechInputTrigger asChild>
    <Button>
        <SpeechInputEqualizer className="h-4 w-4" />
        Record
    </Button>
</SpeechInputTrigger>
 
<SpeechInputBase asChild>
    <CustomInput />
</SpeechInputBase>

Cancelling Input

The SpeechInputCancel button discards the transcription and prevents the onSpeechChange callback:

<SpeechInputCancel />  {/* Only enabled while listening */}

API Reference

SpeechInput

Root provider managing speech recognition state.

Prop	Type	Default
`children*`	`React.ReactNode`
`lang`	`string`
`onSpeechChange`	`function`
`onInterimSpeechChange`	`function`
`onSpeechStart`	`function`

SpeechInputTrigger

Button to start/stop speech recognition. Supports asChild for composition.

SpeechInputCancel

Button to cancel recording and discard transcription. Disabled when not listening.

Prop	Type	Default
`hideWhenNotListening`	`boolean`	`false`

SpeechInputEqualizer

Animated equalizer showing real-time audio activity.

Prop	Type	Default
`className`	`string`

SpeechInputBase

Input field displaying transcribed text. Fully editable by keyboard.

Prop	Type	Default
`asChild`	`boolean`
`noInterim`	`boolean`

Troubleshooting

Issue	Solution
Microphone blocked	Check browser permissions and grant microphone access
No text appearing	Verify microphone works and Web Speech API is supported
Language not recognized	Use valid language codes like `en-US`, `fr-FR`, `de-DE`
Input not editable	Use `asChild` prop or ensure `SpeechInputBase` is properly composed

Quick Form

Avoid form redundancy by using a quick form component.

Stepper

A stepper component to display step by step content.

How is this guide?

Last updated on 11/2/2025