# Number with unit
> Generated from number-with-unit.contract.json — do not edit by hand.

A fixed-width digit input with the unit written IN FULL inline (rendered exactly as passed — "seconds", "points" — muted grey), a hover ▲/▼ stepper, a hard digit cap, clamp-on-change, and an error line — the settings field for a number that carries a unit.

Tier: **leaf-lit**. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.

Surfaces: editor, settings.

## Props
| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `value` | number | `—` | Controlled numeric value |
| `unit` | string | `—` | Inline suffix — written IN FULL, rendered exactly as passed (seconds, points, %) |
| `min` | number | `—` | Lower clamp bound |
| `max` | number | `—` | Upper clamp bound |
| `step` | number | `1` | Stepper / arrow-key increment |
| `maxdigits` | number | `4` | Hard digit cap — a keystroke past this many digits is ignored |
| `size` | small | default | large | `default` | Control height — small 24 · default 32 · large 40; radius stays 8 |
| `errormessage` | string | `—` | Presence draws the red border/ring and the message line below |
| `disabled` | boolean | `false` | Non-interactive; grey fill |
| `change` | CustomEvent<{value}> | `—` | Composed event on commit / stepper / arrow; read e.detail.value (clamped number) |

## Visual standard (measured)
- Box: height 32 (default) · radius 8 · digit input + inline unit + stepper
- Sizes: small 24 · default 32 · large 40 — all radius 8
- Unit: 14/21 #8A8A8A inline suffix; written IN FULL, rendered exactly as passed (seconds, points)
- Stepper: ▲/▼ tertiary (system-caret-up/down), revealed on hover/focus; disabled at min/max
- Digit cap: maxDigits (default 4) — a keystroke past the cap is dropped; numeric only
- Clamp: value clamps to min/max on change AND blur (immediate fallback)
- Error: #F5222D border + ring + a 12/18 #F5222D message line below; sets aria-invalid
- Focus: #6A1EBB border + 2px #D3B4FF@30% ring (persistent wrapper)
- Disabled: #F1F1F1 fill, #EBEBEB border, not-allowed

## When to use
- **Number with unit** — a number the host does NOT provide that carries a unit — a per-item timer, points-per-answer, a spin duration
- **Host time limit** — a standard whole-slide countdown — use the host-native enableTimeLimit, not this
- **Select** — the unit itself is changeable — a unit dropdown, not an inline suffix

A fixed unit is an inline suffix inside the field (SETTINGS-41) — a bordered box beside the input implies the unit is selectable. Write the unit IN FULL, rendered exactly as passed (`seconds`, `points`) — never truncated to a short label. Ship pre-filled with the recommended default and clamp immediately.