Form controls

NumberInput

A numeric input with discrete increment / decrement controls. Step, min, and max are honored both in the +/− buttons and in the underlying native input.

Basic

Quantity

Under a touch screen each stepper takes a 44px target while it draws narrower than under a mouse, so a field as narrow as w-32 keeps room for its value. Each target meets the number and grows outward from it, in either text direction, so a tap just inside the field never steps the value. A mouse sees no change.

Focused from the keyboard, the field turns its border the focus color, with no ring inside or around it, as Input does.

Custom step

Completion

Error state

Seats

Pick a value greater than 0.

API

Prop	Type	Default	Description
`value`	`number`	`0`	Bindable numeric value.
`min`	`number`	no default	Lower bound (inclusive).
`max`	`number`	no default	Upper bound (inclusive).
`step`	`number`	`1`	Increment used by the +/− buttons.
`disabled`	`boolean`	`false`	Disable the entire control.
`required`	`boolean`	`false`	Requires a value. The label carries a mark that says so.
`label`	`string`	no default	Label rendered above the control.
`hint`	`string`	no default	Helper text below the control. An error replaces it.
`error`	`string`	no default	Error message. Reddens the input border.
`id`	`string`	no default	DOM id of the underlying input.
`name`	`string`	no default	Native form name.
`onchange`	`(value: number) => void`	no default	Fires on +/−, on input, and on programmatic change.
`class`	`string`	no default	Extra classes on the wrapper.
`noAI`	`boolean`	`false`	Keep the value from an assistant: a FormAssist never reports it or fills it, and the control is marked data-no-ai for a browser agent.