Text Input

Text entry field with support for labels, icons, error states, and keyboard shortcuts. Suitable for naming tracks, clips, presets, and general text entry.

Basic

Simple text input with controlled value.

Value: "Lead Synth"

With Label

Text input with a visible label.

Track Name

Preset Name

With Icons

Icons can be placed before or after the input.

Sizes

Text inputs come in three sizes.

Small

Medium

Large

Full Width

Text input can expand to fill its container.

Track Name

Error State

Shows validation errors with custom message.

Required Field

This field is required

Invalid Characters

Only letters and numbers allowed

States

Text inputs have different visual states.

Normal

Disabled

Read Only

Submit & Cancel

Handle Enter to submit and Escape to cancel.

Press Enter to Submit

Select on Focus

Automatically select all text when focused.

Select on Focus

Max Length

Limit the number of characters.

Max 20 Characters

DAW Usage Examples

Common text input use cases in a DAW interface.

Track Name

Clip Name

Project Name

Uncontrolled vs Controlled

Supports both controlled and uncontrolled patterns.

Uncontrolled (internal state)

Controlled (parent state)

Accessibility

Text input accessibility features.

Keyboard

Enter - Submit value (if onSubmit provided)
Escape - Cancel editing (if onCancel provided)
Tab - Move focus to next element

ARIA

aria-label - Accessible name when no visible label
aria-invalid - Set automatically when error is true
aria-describedby - Links to error message

Props

selectOnFocus - Auto-select text on focus
maxLength - Character limit
autoFocus - Focus on mount