React Unit Input
A number input that speaks engineering: type 1.5k and it commits 1500, type 250p and it commits 2.5e-10. Monospaced tabular digits, step buttons (Shift+↑ steps ×10), min/max clamping, fixed decimal precision, and a unit slot — either a fixed label (ns, V) or a selectable dropdown (kHz / MHz / GHz). Values commit on Enter or blur; unparseable text reverts instead of corrupting state.
Committed value: 1200 MHz — try typing "1.5k" or use Shift+↑.
V
Clamped to the 0.70 – 1.10 V operating window.
ns
SI prefixes parse on commit — "250p" → 0.25 ns.
gates
Accepts "1.2M".
Installation
npx shadcn@latest add "http://localhost:3000/registry/unit-input.json"
Usage
Loading...
Supported SI prefixes on entry: p n u/µ m k M G T.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | — | Controlled value |
| defaultValue | number | — | Uncontrolled initial value |
| onValueChange | (value: number) => void | — | Fires on commit (Enter, blur, step) |
| unit | string | — | Fixed unit label |
| units | string[] | — | Selectable units (renders a dropdown) |
| selectedUnit | string | — | Controlled unit selection |
| onUnitChange | (unit: string) => void | — | Unit dropdown change |
| min / max | number | — | Clamp bounds applied on commit |
| — | — | — | Arrow/stepper increment (Shift = ×10) |
| — | — | — | Fixed decimal places on commit |
| — | — | — | Error styling + |
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.