Demo

Number Input

Numeric entry field with drag-to-adjust, increment/decrement buttons, and customizable step values. Suitable for BPM, frequency, gain, and other numeric parameters.

Basic

Simple numeric input with drag-to-adjust.

Value: 120

With Unit

Display a unit suffix after the value.

Hz
ms
dB

Custom Formatting

Custom value formatting for display.

dB
Hz

With Increment/Decrement Buttons

Show buttons instead of drag handle.

ms

Sizes

Number inputs come in three sizes.

Full Width

Number input can expand to fill its container.

Step Values

Configure step size for coarse or fine adjustments.

Drag Sensitivity

Adjust how much the value changes per pixel dragged.

States

Number inputs have different visual states.

DAW Usage Examples

Common number input use cases in a DAW interface.

Hz
st
%

Uncontrolled vs Controlled

Supports both controlled and uncontrolled patterns.

Uncontrolled (internal state)
Controlled (parent state)

Interactions

Multiple ways to adjust number input values.

Keyboard

  • Arrow Up/Down - Increment/decrement by step
  • Shift + Arrow - Fine adjustment (step / 10)
  • Ctrl/Cmd + Arrow - Coarse adjustment (step × 10)
  • Enter - Commit typed value
  • Escape - Cancel edit, restore previous value

Mouse

  • Drag handle - Drag up/down to adjust
  • Shift + drag - Fine adjustment
  • Ctrl/Cmd + drag - Coarse adjustment
  • Mouse wheel - Scroll to adjust (when focused)

Direct Entry

  • Click input - Focus and select all
  • Type value - Direct numeric entry

Accessibility

Number input accessibility features.

ARIA Attributes

  • aria-label - Accessible name (uses label prop)
  • aria-valuemin - Minimum allowed value
  • aria-valuemax - Maximum allowed value
  • aria-valuenow - Current value

Input Mode

  • inputMode="decimal" - Numeric keyboard on mobile
  • type="text" - Allows formatted values