InputNumPicker

Usage

import { InputNumPicker } from '@acronis-platform/ui-react';

InputNumPicker is a numeric stepper field built on Base UI's NumberField. It adds an optional label (with a required marker) above a bordered box holding a decrement button, the numeric value, and an increment button. The steppers reuse the already-themed ButtonIconInput rather than duplicating its idle/hover/ active/disabled token wiring. Themed by the --ui-input-num-picker-* tokens. This is a distinct component from NumberField (the bare, unlabelled steppers-only primitive) — use InputNumPicker whenever the field needs a label.

Examples

A basic field with bounds:

<InputNumPicker label="Quantity" defaultValue={1} min={0} max={10} />

Required:

<InputNumPicker label="Quantity" required />

Controlled:

const [value, setValue] = React.useState<number | null>(3);

<InputNumPicker label="Seats" value={value} onValueChange={setValue} />;

Disabled:

<InputNumPicker label="Quantity" disabled defaultValue={5} />

API Reference