Quantity Input

A number input paired with a unit select, for entering material quantities with unit conversion.

$bunx shadcn@latest add @nx-ui/quantity-input
Registry item
Installs withnumber-inputselectutils

Basic usage

Defaults to mass units (tonnes / kg).

Volume units

Pass a custom units list — here, cubic metres and litres.

Unit conversion

Switching units re-scales the amount when toBase factors are supplied — try changing kg to tonnes.

Disabled and invalid

Standard disabled and aria-invalid treatments.

Controlled — aggregate load

A controlled tonnes/kg quantity, as logged on a Nexus ReGen delivery note.

18.5 tonnes logged against delivery note DN-5521.

Skip capacity — custom units

A units list without toBase factors (yd³ / m³ shown side by side, no auto-conversion).

API reference

Exported parts and their props, extracted from the component source.

…extends QuantityInputProps