Client component

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" w="full" maxW="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>
  );
}

step

precision

hideSteppers

import { NumberInput } from "astralis-ui";

<NumberInput
  defaultValue={3}
  precision={0}
/>

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`	None	Controlled / uncontrolled value.
`onChange`	`(value: number \| null) => void`	None	Fires on commit.
`min / max`	`number`	None	Clamping bounds (also `aria-valuemin/max`).
`step`	`number`	`1`	Arrow/stepper increment.
`precision`	`number`	None	Decimal places on commit.
`hideSteppers`	`boolean`	`false`	Remove the +/− buttons.
`size / variant / invalid`	`as Input`	`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.