Search nx-ui
Jump to any foundation, component, block or example.
Mass Input
A weight/volume quantity control for waste movements — a numeric input with a t / kg / m³ unit selector and a live converted equivalent when the material's reference density is known.
bunx shadcn@latest add @nx-ui/mass-inputWeight only
No material supplied, so no conversion is shown — the control behaves as a plain quantity input.
Volume with material
Entering a volume of crushed concrete shows the live tonnage equivalent from the reference density.
18 t · 18,000 kg at 1.5 t/m³
Weight with material
The same control in tonnes, converting to cubic metres for a load of firm clay.
12,000 kg · 6.7 m³ at 1.8 t/m³
Unit switching
A controlled example — switch between kilograms, tonnes and cubic metres and the readout follows.
4.2 t · 3.2 m³ at 1.3 t/m³
Invalid and disabled
The invalid state marks the control with the destructive treatment; disabled greys out the whole control.
0 kg · 0.0 m³ at 1.8 t/m³
24,000 kg · 12.0 m³ at 2 t/m³
API reference
Exported parts and their props, extracted from the component source.
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | null | — | Controlled quantity in the current unit. |
defaultValue | number | — | Initial quantity for uncontrolled usage. |
onValueChange | (value: number | null) => void | — | — |
unit | MassUnit | — | Controlled unit — tonnes, kilograms or cubic metres. |
defaultUnit | MassUnit | "t" | Initial unit for uncontrolled usage. Defaults to `"t"`. |
onUnitChange | (unit: MassUnit) => void | — | — |
material | string | — | A material term code (e.g. `"TOPSOIL_BS3882"`) or leaf class key (e.g. `"soil.topsoil"`) — the mid reference density drives the live weight ↔ volume conversion beneath the control. |
density | number | — | Explicit density in t/m³. Takes precedence over `material`. |
size | "default" | "sm" | "default" | — |
disabled | boolean | — | — |
invalid | boolean | — | Marks the control as invalid (destructive border + ring). |
placeholder | string | — | — |
id | string | — | — |
name | string | — | — |
className | string | — | — |