Design system

NumberInput

A number with a unit and steppers.

import { NumberInput } from "@flinbu/seed";

Units and steps

Radius

Duration

Opacity

import { Field, NumberInput } from "@flinbu/seed";

<div className="grid w-full max-w-xl grid-cols-1 gap-base sm:grid-cols-3">
  <Field label="Radius"><NumberInput unit="px" defaultValue={12} min={0} max={48} /></Field>
  <Field label="Duration"><NumberInput unit="ms" defaultValue={200} min={0} step={20} /></Field>
  <Field label="Opacity"><NumberInput unit="%" defaultValue={40} min={0} max={100} stepper={false} /></Field>
</div>

Use it for

Radii, spacing, durations, opacity.

Use something else for

Choosing between a few values: use Select or ToggleGroup.

Props

Prop	Type	Default	Description
`value / onValueChange`	`numbernull`	–	The number.
`min / max / step`	`number`	`step 1`	Bounds; decimals follow the step.
`unit`	`string`	–	px, ms, %.
`stepper`	`boolean`	`true`	Show the Buttons.

Accessibility

A spinbutton: Up and Down step, Shift steps by ten.
The steppers stay out of the Tab order.