# Money input

An amount with its currency: a currency menu on the left, the symbol, then a right-aligned tabular amount. GBP is the base; EUR and USD are shown beside it. An unverified rate shows amber.

- **Group:** Form controls · **family:** `form-controls` · **shadcn:** composed
- **Build:** Composed: `Input` + `DropdownMenu` (currency).
- **In apps/admin today:** No money input in apps/admin.
- **Client component:** yes. 

## Content rules

- Two decimals while editing, none in lists when whole.

## Do

- Store minor units (pence).

## Don't

- Mix currencies in one column without the code.

## Accessibility

- **Keyboard:** Tab: currency button, then amount.
- **ARIA:** Amount `inputMode="decimal"`, `aria-label` includes the currency ("Price in GBP").
- **Focus:** Halo on the whole field (`:focus-within`).

## Tokens

`--s-3` `--input` `--w-semibold` `--text-small` `--font-code` `--foreground` `--r-control` `--motion-hover` `--muted` `--muted-foreground` `--text-body` `--r-chip` `--text-micro` `--font-voice` `--warning` `--status-soft-alpha`

## Files

`money-input.html` live specimen · `money-input.css` kit rules · `money-input.d.ts` props · full page: `docs/components/money-input/` (phone: `m/`).