Mic selector

Searches available microphone inputs with explicit permission activation, device-change updates, and recoverable selection states.

Preview

Microphone

Loading microphones…

In action

Choose an audio input

Microphone

Loading microphones…

Inputs are discovered without starting a recording. Allow microphone access reveals available device names, then releases the temporary stream. The application owns how the selected input is used.

When to use

Use it for

Select a device before application-owned recording.
useAudioDevices enumerates without opening a microphone; requestAccess asks for permission only when activated.
Input labels may be unavailable until the user allows access. Temporary permission streams are released.
Keep value controlled to preserve a selected device across device-change events.
CSS-only markup requires application code for discovery and capture permissions.

Avoid

Assuming selection starts recording or guarantees that a disconnected device remains usable.
Requesting microphone permission automatically when rendering a page.

Install

React package

npm install @noorddev/vlak-react

Load the stylesheet once at your app root, then import the components you use.

import "@noorddev/vlak-react/css";
import { MicSelector } from "@noorddev/vlak-react";

Per-component imports are available at @noorddev/vlak-react/components/mic-selector.

Copy the source

npx @noorddev/vlak-cli add mic-selector

Adds the component and its dependencies to components/vlak/. Follow the StyleX setup to compile the source in your application.

shadcn registry

npx shadcn add https://vlak.dev/r/mic-selector.json

Installs the same source through the shadcn CLI.

React

"use client";
import { useState } from "react";
import { MicSelector } from "@noorddev/vlak-react";

export function MicrophonePicker() {
  const [deviceId, setDeviceId] = useState("");
  return <MicSelector label="Microphone" value={deviceId} onValueChange={setDeviceId} />;
}

See the integration example to compose these components with your application's model and data.

Props

MicSelector

Searchable microphone choice. The application owns capture and the selected device's use.

Prop	Type	Default
`value`	`string`
`defaultValue`	`string`	`""`
`onValueChange`	`(deviceId: string) => void`
`label`	`string`	`"Microphone"`
`disabled`	`boolean`	`false`

Also accepts Omit<HTMLAttributes<HTMLDivElement>, "defaultValue">.

The ref reaches HTMLDivElement.

useAudioDevices (hook)

Enumerates inputs without opening a microphone; requestAccess is an explicit user action.

Keyboard

Keys	Does
`Type`	Filters the microphone list
`Arrow Down, Arrow Up, Enter`	Navigates and chooses an available microphone
`Escape`	Closes the selection list
`Tab, Enter, Space`	Reaches and activates permission or refresh controls

Accessibility

A visible label names the combobox. Loading, permission errors, and disconnection are announced through a status region.
Keyboard filtering comes from the shared Combobox. Permission and refresh actions use native 44px buttons.
Native div attributes and the root ref are forwarded.

Markup

The same styles are available as CSS. Native HTML provides the static presentation; React or application code supplies state updates and actions.

npm install @noorddev/vlak

import "@noorddev/vlak/css";

<div class="rs-mic-selector"><label class="rs-mic-selector-label" for="microphone">Microphone</label><select id="microphone" class="rs-input"><option>System microphone</option></select><p class="rs-mic-selector-message">Selecting an input does not start recording.</p></div>

Classes

.rs-mic-selector.rs-mic-selector-label.rs-mic-selector-actions.rs-mic-selector-message

Depends on

Button Combobox Input

Use elsewhere

Markdown reference Registry JSON Source AI integration guide