Microphone selector

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

Choose the microphone, test it with a live level and mute it, with every permission and device state spelled out: not yet allowed, blocked (and how to unblock), no microphone, unplugged. Shares its microphone with the rest of the screen.

Use it for

Before recording, dictating or joining a call.
Voice settings: input choice, a level test and mute.

Not for

Speaker or other output choice (select).
The record control itself (voice-button).
A level display without choosing (live-waveform).

Anatomy

label
device select (system default first)
test button
level preview (live-waveform)
mute toggle
state message (allow, blocked, no device) with the fix and a retry

Variants

size: sm, md, lg

States

permission not asked ("Allow microphone")
asking
allowed, idle (names listed)
testing (live level)
muted (level stops, says Muted)
blocked (how to unblock, Try again)
no microphone / unplugged (plug one in, Try again; the list refreshes on its own)
unsupported or insecure page
disabled

Keyboard

Tab: select, test, mute
Select: Enter / Space / ↓ opens, arrows move, Enter chooses
Test and Mute are toggle buttons (aria-pressed)

Motion

The level preview runs only while testing and on screen; nothing runs otherwise.

Props

Prop	Type	Default	Description
`microphone`	`Microphone`	—	Share one from useMicrophone() with a speech input or a call on the same screen; one is created otherwise.
`value / defaultValue / onValueChange`	`string`	—	Device id; "" is the system default. Used when no microphone is passed.
`muted / defaultMuted / onMutedChange`	`boolean`	—	Used when no microphone is passed.
`preview`	`boolean`	`true`	Show the Test button and level.
`label`	`string`	`"Microphone"`
`hideLabel / size / disabled`	`boolean / "sm" \| "md" \| "lg" / boolean`	—
`classNames`	`MicSelectorClassNames`	—
`style / ref`	`CSSProperties / native Ref`	—

Built from

select
live-waveform
button
tooltip
alert

Dependencies

lucide-react

Import

import { MicSelector } from "@/components/mic-selector/mic-selector";

Get it

Microphone selector 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