# Audio Recorder

Voice-note recorder controls: hold the mic for a live timer, slide left to throw the take away, or slide up to lock hands-free with a level meter. Your app does the recording.

> Composed · Pro · Mobile-Native — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/audio-recorder
```

## Import

```tsx
import { AudioRecorder } from "@/components/ui/audio-recorder/audio-recorder";
```

## Variants

- `chat` — Chat composer: `npx @lumioui/cli add pro/audio-recorder-chat`
- `memo` — Voice memo: `npx @lumioui/cli add pro/audio-recorder-memo`
- `push-to-talk` — Push to talk: `npx @lumioui/cli add pro/audio-recorder-push-to-talk`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `mode?` | `"hold" | "toggle"` | `hold` — press and hold to record, release to send (default). `toggle` — tap to start, tap to stop. |
| `layout?` | `"inline" | "hero"` | `inline` — composer strip with a 44pt mic (default). `hero` — large waveform, timer and button. |
| `level?` | `number` | Live input level 0–1 from your recorder's metering; each update appends a bar and drives the mic halo. |
| `maxDuration?` | `number` | Seconds — recording auto-sends at this length. |
| `lockable?` | `boolean` | Inline hold: allow sliding up to lock hands-free. Default true. |
| `onRecordStart?` | `() => void` | Fires the moment recording starts — start your recorder. |
| `onRecordEnd?` | `(seconds: number) => void` | Fires with the length in seconds when the take is sent. |
| `onRecordCancel?` | `() => void` | Fires when the take is discarded (slide to cancel, trash, or a too-short hold). |
| `onLock?` | `() => void` | Fires when an inline hold is locked by sliding up. |
| `holdHint?` | `string` | Hint shown after a too-short tap in hold mode. |
| `slideLabel?` | `string` | Label shown while holding. Default "Slide to cancel". |
| `idleLabel?` | `string` | Hero idle caption. Defaults by mode. |
| `bars?` | `number` | Bars in the level meter. Default 28 inline / 44 hero. |
| `disabled?` | `boolean` | — |
| `children?` | `React.ReactNode` | Inline idle content left of the mic (your text field). Hidden while recording. |
| `accessibilityLabel?` | `string` | Screen-reader name for the record button. Default "Record voice message". |
| `className?` | `string` | — |

## Icons rendered

- `mic` — /icons.html?i=mic
- `trash` — /icons.html?i=trash
- `chevron-left` — /icons.html?i=chevron-left
- `lock` — /icons.html?i=lock
- `chevron-up` — /icons.html?i=chevron-up

Source: https://lumioui.com/components/audio-recorder