Number Input

A numeric field with steppers, clamping, and spinbutton keyboard support.

import { NumberInput, VStack } from "astralis-ui";

export function NumberInputDemo() {
  return (
    <VStack gap="4" alignItems="stretch" className="astralis:w-full astralis:max-w-56">
      <NumberInput defaultValue={4} min={0} max={10} aria-label="Crew size" />
      <NumberInput defaultValue={2.5} step={0.5} precision={1} aria-label="Thrust (0.5 steps)" />
      <NumberInput defaultValue={7} hideSteppers aria-label="No steppers" />
      <NumberInput defaultValue={3} disabled aria-label="Disabled" />
    </VStack>
  );
}

Import#

import { NumberInput } from "astralis-ui";

Typing is free-form — the value parses, clamps to min/max, and rounds to precision when you commit (blur, Enter, or the steppers). onChange receives the committed number, or null when cleared.

Props#

Prop	Type	Default	Description
`value` / `defaultValue`	`number \| null`	—	Controlled / uncontrolled value.
`onChange`	`(value: number \| null) => void`	—	Fires on commit.
`min` / `max`	`number`	—	Clamping bounds (also `aria-valuemin/max`).
`step`	`number`	`1`	Arrow/stepper increment.
`precision`	`number`	—	Decimal places on commit.
`hideSteppers`	`boolean`	`false`	Remove the +/− buttons.
`size` / `variant` / `invalid`	—	as Input	Shares the Input styling system.

Keyboard#

Key	Action
`↑` / `↓`	± `step` (clamped)
`Home` / `End`	Jump to `min` / `max`
`Enter`	Commit the typed value

Accessibility#

Renders role="spinbutton" with aria-valuemin/max/now and inherits label and description wiring from Field. The stepper buttons are excluded from the tab order — keyboard users get arrows, which are faster.