NumberField

Usage

import {
  NumberField,
  NumberFieldGroup,
  NumberFieldDecrement,
  NumberFieldInput,
  NumberFieldIncrement,
} from '@acronis-platform/ui-react';

NumberField is a numeric input with − / + steppers, min / max / step, and keyboard stepping (↑/↓, PageUp/PageDown), built on Base UI's NumberField. The box reuses the InputText token tier, so it matches the other inputs. Compose the parts in any order inside NumberFieldGroup; give the steppers and input accessible names (or pair the field with a Field).

Design-pending v1, ported from the legacy shadcn-uikit number-field.

Examples

<NumberField defaultValue={3} min={0} max={99}>
  <NumberFieldGroup>
    <NumberFieldDecrement aria-label="Decrease" />
    <NumberFieldInput aria-label="Quantity" />
    <NumberFieldIncrement aria-label="Increase" />
  </NumberFieldGroup>
</NumberField>

For an approximate value across a range use Slider; for free text use InputText.

API Reference

NumberField re-exports Base UI's NumberField.Root props — value / defaultValue / min / max / step / disabled / onValueChange. NumberFieldGroup, NumberFieldInput, NumberFieldDecrement, and NumberFieldIncrement accept their Base UI part props plus className.