Number Field

A numeric input component with increment and decrement buttons, supporting scrub interaction.

Anatomy

Import and use the component standalone or composed:

1import { NumberField } from "@raystack/apsara";
2

3{/* Standalone — renders decrement, input, and increment internally */}
4<NumberField defaultValue={0} />
5

6{/* Composed — full control over sub-components */}
7<NumberField defaultValue={0}>
8  <NumberField.ScrubArea label="Amount" />
9  <NumberField.Group>
10    <NumberField.Decrement />
11    <NumberField.Input />
12    <NumberField.Increment />
13  </NumberField.Group>
14</NumberField>

API Reference

Root

The root component that manages numeric state. When no children are provided, it renders a default group with decrement, input, and increment controls.

Prop

Type

Group

Groups the input and button controls together.

Prop

Type

Input

The numeric input element.

Prop

Type

Decrement

Button to decrease the value.

Prop

Type

Increment

Button to increase the value.

Prop

Type

ScrubArea

An interactive area that allows adjusting the value by dragging. Renders a Label component internally.

Prop

Type

Examples

Basic

A standalone number field with default controls.

1<NumberField defaultValue={0} />

Min / Max

Number field constrained to a range.

1<NumberField defaultValue={5} min={0} max={10} />

Step

Number field with a custom step amount.

1<NumberField defaultValue={0} step={5} />

Disabled

Number field in disabled state.

1<NumberField defaultValue={0} disabled />

Composed with ScrubArea

Full control with scrub area for drag-to-adjust interaction.

1<NumberField defaultValue={0}>
2  <NumberField.ScrubArea label="Amount" />
3  <NumberField.Group>
4    <NumberField.Decrement />
5    <NumberField.Input />
6    <NumberField.Increment />
7  </NumberField.Group>
8</NumberField>

Formatted

Number field with currency formatting.

1<NumberField
2  defaultValue={1000}
3  format={{ style: "currency", currency: "USD" }}
4/>

Accessibility

  • The input has role="textbox" with aria-roledescription="Number field"
  • Increment and decrement buttons are keyboard accessible
  • ScrubArea associates its label with the input via htmlFor
  • Supports aria-valuemin, aria-valuemax, and aria-valuenow
  • Keyboard: Arrow Up/Down to increment/decrement, Shift for large step, Meta for small step