Number field

Numeric input with increment and decrement steppers. Use for quantities, counts, and bounded values.

Examples

Quantity

With scrub

Font size

Overview

Number field wraps a numeric input with stepper buttons. Set min, max, and step on the root. Label the input or wrap the field with a visible label.

tsx

import {
  NumberField,
  NumberFieldGroup,
  NumberFieldDecrement,
  NumberFieldInput,
  NumberFieldIncrement,
} from "@standard-ui/react"

<NumberField defaultValue={1} min={0} max={99}>
  <NumberFieldGroup>
    <NumberFieldDecrement />
    <NumberFieldInput aria-label="Quantity" />
    <NumberFieldIncrement />
  </NumberFieldGroup>
</NumberField>

Usage

Bounds

Prefer explicit min and max for form quantities so steppers stop at sensible limits.

tsx

<NumberField defaultValue={1} min={0} max={99} step={1}>
  {/* group + steppers */}
</NumberField>

Anatomy

tsx

NumberField
  NumberFieldGroup
    NumberFieldDecrement
    NumberFieldInput
    NumberFieldIncrement

API

Prop / part	Type	Default	Description
defaultValue	number	—	Uncontrolled initial value.
value	number \| null	—	Controlled value.
min	number	—	Lower bound for stepping and clamping.
max	number	—	Upper bound for stepping and clamping.
step	number	1	Amount changed by steppers and arrow keys.
NumberFieldScrubArea	—	—	Optional drag-to-scrub control.

Guidelines

Do

Set min and max for quantities that must stay in range
Give the input an accessible name
Use Slider when the value is approximate or visual

Don't

Don't use number field for free-form text
Don't hide steppers if users need precise increments
Don't leave the input unlabeled