# Inputs

Text inputs, textareas, selects. Single visual treatment, semantic states. Reference: `kdcvault/frontend/src/components/ui/input.tsx` and `.kdc-input` / `.kdc-input-underline` utilities in `kdcsurveyadd/app/globals.css`.

## Anatomy

See `anatomy.svg`. Label · input shell · helper / error text. Label sits above the input; helper text below in `text.muted` `bodyS`.

## Variants

| Token | Use | Background | Border |
|-------|-----|------------|--------|
| `input.default` | Standard field | `surface.background` | `border.default` (1px) |
| `input.filled` | High-density forms | `surface.subtle` | none |
| `input.underline` | Marketing / minimal forms | transparent | bottom 1px `border.default` |

## Sizes

| Size | Height | Padding |
|------|--------|---------|
| `sm` | 32px | `6px 10px` |
| `md` (default) | 40px | `8px 12px` |
| `lg` | 48px | `12px 16px` |

## States

- **Hover** — border `border.default` → `border.strong`, `120ms` transition.
- **Focus-visible** — apply `elevation.focusRing`, border `brand.primary`.
- **Disabled** — `opacity: 0.5`, `cursor: not-allowed`, background `surface.subtle`.
- **Error** — border `semantic.danger`, helper text `semantic.danger`, focus ring `rgba(176,56,47,0.18)`.
- **Read-only** — background `surface.subtle`, remove border, keep text colour.

## Tokens used

`components.input.*`, `elevation.focusRing`, `colors.border.*`, `colors.semantic.danger`.

## Accessibility

- Every input has a programmatically associated `<label>` (visible or `sr-only` only when an adjacent icon supplies meaning).
- Error messages reference the input via `aria-describedby` and use `role="alert"` on first appearance.
- Placeholder text is decorative — never the only label.
- Maintain 4.5:1 contrast on placeholder text (currently `text.muted` `#6B647A`).

## Do / Don't

- ✅ Show errors *under* the input, not as a tooltip.
- ✅ Use `tabular-nums` for numeric-only inputs (`.tnum` utility).
- ❌ Don't use placeholder text as a label.
- ❌ Don't shrink the height below 32px — it breaks touch targets.