NumberField

A number input with step arrows and a scrub area.

import { NumberField } from 'components/UI/NumberField'

Basic

Group shows the input and the step arrows. Put Field.Label in ScrubArea to make the label draggable.

Monthly events (millions)

Drag the label left or right to change the value.

Match the size of the buttons beside the field, and use lg only for a hero field. sm, md, and lg are 26, 36, and 44 pixels high.

sm · dense UI

md · default

lg · hero field

Use inset by default and line for light or inline editing, with one appearance per form. Set invalid or disabled on Field.Root for the other states.

inset · forms

Empty

Filled

Invalid

Enter 100 or less.

Disabled

line · inline editing

Empty

Filled

Invalid

Enter 100 or less.

Disabled

These are defaults, not laws. Break one when you have a good reason, or when it makes the design more cohesive or more interesting.

Label the field with Field.Label inside Field.Root. Put the label in NumberField.ScrubArea to let users drag it to change the value.
For a value inside a range, where position matters more than the exact number, use Slider.

Props that the library adds. Every part also takes all the Base UI props.

Prop	Type	Default	Description
size	'sm' \| 'md' \| 'lg'	'md'	Sets the text size, padding, and control height.
appearance	'inset' \| 'line'	'inset'	Sets the field shape. Line shows only a bottom line and no divider before the steppers.
children	ReactNode	<Input /><Steppers />	The content of the field. The default is the input and a spin box.

Prop	Type	Default	Description
className	string	–	Classes for the column that holds `Increment` and `Decrement`. This part is not in Base UI.

Prop	Type	Default	Description
children	ReactNode	–	The cursor that shows while the user drags. The default is a left and right arrow.