Number input

Numeric input with increment / decrement buttons. Aligned with J&J DS v1.2 (Figma 22343:97917). Bounded by min, max, and step.

Sizes

Show source

<NumberInput size="sm" defaultValue={0} />
<NumberInput size="md" defaultValue={0} />
<NumberInput size="lg" defaultValue={0} />

With Field — bounds and helper

Quantity

Up to 100 per order

Step by 5

Increments by 5

Show source

<Field label="Quantity" description="Up to 100 per order">
  <NumberInput defaultValue={1} min={0} max={100} />
</Field>

Error and warning

Dose (mg)

Exceeds max safe dose (100mg)

Dose (mg)

High — confirm with prescriber

Show source

<Field label="Dose (mg)" status="error" message="Exceeds max safe dose (100mg)">
  <NumberInput defaultValue={278} max={100} />
</Field>
<Field label="Dose (mg)" status="warning" message="High — confirm with prescriber">
  <NumberInput defaultValue={89} max={100} />
</Field>

Disabled and read-only

Locked

Auto-computed

Show source

<Field label="Locked" disabled><NumberInput defaultValue={42} /></Field>
<Field label="Auto-computed"><NumberInput readOnly defaultValue={64} /></Field>

Decimal step

Step accepts any positive number — set 0.1 for one-decimal precision.

Weight (kg)

Show source

<Field label="Weight (kg)"><NumberInput defaultValue={1.5} step={0.1} min={0} /></Field>