## Unit Input (S—173)

A number field with a unit switcher that converts the value when you change units (px ↔ rem ↔ %, kg ↔ lb).

- URL: https://sundaeui.dev/components/unit-input
- Category: Forms & inputs · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/unit-input.json`
- Tags: measurement, form, number, input, convert, units

Type a number, pick a unit from the trailing menu, and the value is converted rather than reinterpreted, with sensible rounding. Arrow keys step, Shift steps by ten.
Unit groups are data, so the same field handles lengths, weights, temperatures or currencies with fixed rates.

### Usage

```tsx
import { UnitInput } from '@/components/sundae/unit-input'

<UnitInput />
```

### Props

- `units` (`{ id: string; label: string; toBase: (n) => number; fromBase: (n) => number }[]`, required): Units in a group.
- `defaultValue` (`number`): Initial value in the first unit.
- `onValueChange` (`(value: number, unit: string) => void`): Called on change.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Design tools, recipe apps, shipping forms, health inputs.

### When not to use

- Fixed-unit fields.

### Accessibility

- The value is a spinbutton and the unit a native select, both labelled.
- Conversions are announced.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- ↑ / ↓: Step
- Shift + ↑ / ↓: Step ×10