## Number with unit
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.
Default to the HTML snippet — <aha-number-with-unit> is a standard custom element that renders on open — React/Vue are thin adapters over the same element.
Surfaces: editor, settings.
Props:
- value: number, default —. Controlled numeric value
- unit: string, default —. Inline suffix — written IN FULL, rendered exactly as passed (seconds, points, %)
- min: number, default —. Lower clamp bound
- max: number, default —. Upper clamp bound
- step: number, default 1. Stepper / arrow-key increment
- maxdigits: number, default 4. Hard digit cap — a keystroke past this many digits is ignored
- size: small | default | large, default default. Control height — small 24 · default 32 · large 40; radius stays 8
- errormessage: string, default —. Presence draws the red border/ring and the message line below
- disabled: boolean, default false. Non-interactive; grey fill
- change: CustomEvent<{value}>, default —. Composed event on commit / stepper / arrow; read e.detail.value (clamped number)
Tokens: border, border-hover, color-primary, bg-container, bg-container-disabled, bg-accent, text-default, text-tertiary, text-disabled, icon-muted, radius-default, radius-xs, focus-ring-soft, border-error, color-error, border-disabled.
Use when: 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).