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). NumberFieldGroup sizes to its content rather than stretching to fill its container, so it sizes correctly in a flex/grid ancestor.

No Figma design exists for NumberField anywhere, and there's no active effort to have UX draw one — its visuals reuse the InputText box + ButtonIcon-style steppers, which carry their own designs. 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.

NumberFieldGroup doesn't force itself to fill its container — it shrinks to its content's min-w inside a constrained flex/grid ancestor instead of being stretched to evenly split the row. Pass a width utility via className (e.g. className="w-48") to size it explicitly, or className="w-full" to restore the old full-width behavior.