Voice picker

A React component in Beamline's Voice & audio category.

Choose a text-to-speech voice from a searchable list (name, accent, tone, use) and hear it first: each voice has its own orb, previews play one at a time and the orb speaks while its sample plays.

Use it for

Choosing a voice for an agent, a narration or read-aloud in settings or a builder.

Not for

Choosing people (combobox).
A short list without previews (select).
Choosing a microphone (mic-selector).

Anatomy

label
trigger (orb, name, facets)
preview button for the chosen voice
list: search field, rows (orb, name, facets, check), footer preview for the highlighted voice

Variants

size: sm, md, lg

States

empty (placeholder)
chosen
open
searching (matches ranked, match emphasised)
no match
previewing (orb speaks, Stop)
preview loading
preview failed
no preview for a voice
disabled

Keyboard

Trigger: Enter, Space or ↓ opens
In the list: type to search, ↑ ↓ move, Enter chooses (focus returns to the trigger), Escape closes
→ at the end of the search previews the highlighted voice; Tab reaches the footer Preview button
The chosen voice's Preview is a toggle button (aria-pressed)

Motion

Orbs breathe slowly and pause off screen; the previewing voice's orb swirls as it speaks. Under reduced motion they hold still.

Props

Prop	Type	Default	Description
`voices` (required)	`VoiceOption[]`	—	{ voiceId, name?, labels?, previewUrl?, description? }: a provider's voice list as is.
`value / defaultValue / onValueChange`	`string`	—	The chosen voiceId.
`open / defaultOpen / onOpenChange`	`boolean`	—
`label`	`ReactNode`	`"Voice"`
`hideLabel / placeholder / size / disabled`	`boolean / string / "sm" \| "md" \| "lg" / boolean`	—
`preview`	`boolean`	`true`	Offer previews (voices need a previewUrl).
`facets`	`string[]`	`["accent", "tone", "use"]`	Which labels to show, in order.
`classNames`	`VoicePickerClassNames`	—	Classes for documented visual parts; internal refs and event handlers are retained.
`style / ref`	`CSSProperties / Ref`	—	Visual root style; ref targets native trigger button.

Built from

orb
button
tooltip
popover

Dependencies

lucide-react

Import

import { VoiceOrb, VoicePicker } from "@/components/voice-picker/voice-picker";

Get it

Voice picker is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent