NumberInput

A number field wrapped in an InputGroup with a ghost − button on the left and a ghost + button on the right. The buttons and ↑/↓ step by step, clamped to min/max. The native spinner is hidden. Props pass through to the underlying Input / InputGroup.

Basic

Min, max, and step

Steppers disable at the bounds; typed values are clamped on step. step can be fractional.

Sizes

Disabled

Props

Prop	Type	Default	Description
`value`	`number \| null`	—	Controlled value. `null` renders an empty field.
`defaultValue`	`number`	—	Uncontrolled initial value.
`onValueChange`	`(value: number \| null) => void`	—	Fires with the parsed number, or `null` when cleared.
`min`	`number`	—	Lower bound.
`max`	`number`	—	Upper bound.
`step`	`number`	`1`	Amount added/removed per step.
`size`	`'xs' \| 'sm' \| 'md' \| 'lg'`	`'md'`	Field size (passed to `InputGroup`).
`className`	`string`	—	Class for the outer `InputGroup`.
`inputClassName`	`string`	—	Class for the inner input.

Remaining props (id, name, placeholder, disabled, aria-*, …) pass through to the input.

Form integration

Use Form.NumberInput inside a Form.Field for React Hook Form + Zod wiring. It reads its name from the field and writes a number | null to the form value.

<Form onSubmit={handleSubmit}>
  <Form.Field name="quantity" label="Quantity">
    <Form.NumberInput min={1} max={99} />
  </Form.Field>
  <Form.SubmitButton>Save</Form.SubmitButton>
</Form>