docs/components/input/AudioInput

AudioInput

Microphone recording input.

import { AudioInput } from '@ybouhjira/hyperkit';

#Playground

Edit the code — the preview recompiles and re-renders as you type.

Live playground
Loading preview…

#Props

PropTypeDefaultDescription
valueFile | File[] | nullCurrently selected audio file(s).
onChange *(files: File | File[] | null) => voidCallback when audio files are selected or removed.
mode'single' | 'list''single'Selection mode: 'single' for one file, 'list' for multiple.
acceptstring'audio/*'Accepted MIME types.
maxSizenumberMaximum file size in bytes.
placeholderstring'Select audio file'Placeholder text shown when no files are selected.
disabledbooleanfalseDisable file selection and playback controls.
classstringAdditional CSS classes.
styleJSX.CSSPropertiesCustom styles.
onError(error: { type: 'validation' | 'format' | 'size' | 'corrupt'; message: string; file?: File; }) => voidCallback when a file validation or processing error occurs.
errorstringError message to display (controlled). When set, shows error state.

* required prop.

#Design Tokens

This component reads the following CSS custom properties. Override them globally or per-instance to restyle it — see the CSS Variables guide.

  • --sk-accent
  • --sk-audio-input-bg
  • --sk-audio-input-border
  • --sk-audio-input-progress-bg
  • --sk-audio-input-progress-fill
  • --sk-audio-input-radius
  • --sk-bg-secondary
  • --sk-bg-tertiary
  • --sk-border
  • --sk-color-danger
  • --sk-color-danger-bg
  • --sk-font-size-sm
  • --sk-radius-md
  • --sk-radius-sm
  • --sk-space-lg
  • --sk-space-md
  • --sk-space-sm
  • --sk-space-xs
  • --sk-text-primary
  • --sk-text-secondary