Input
Atombeta@macaw-ds/ui · since 0.1.0Single-line text entry: names, emails, references, amounts. Not for multi-line text, dates or selections.
Contract
From the manifest's a11y block: what assistive technology sees, and every key the component handles.
- Role
- textbox (searchbox for type="search")
- Focusable
- Yes. Uses the shared focus ring.
- Accessible name
- From a visible label via id + htmlFor (preferred), or aria-label / aria-labelledby. TypeScript requires one of the three.
- Notes
- Border meets 3:1 non-text contrast against the field background in both themes; the invalid border is the critical colour.
- Placeholder text meets 4.5:1 but is never the label.
- Adornments are aria-hidden. If the unit matters, say it in the label: "Amount (USD)".
- Error messages are linked with aria-describedby so they are announced with the field.
| Keys | Behaviour |
|---|---|
| Tab | focus |
| — | Typing edits the value |
| — | Escape clears a type="search" field in most browsers |
Motion
- What moves
- Border colour eases on hover.
- Tokens
- duration.fastease.standard
- Reduced motion
- Every token above collapses to 0 ms (and the spin animation to none) under the OS preference or inside any data-motion="reduced" scope. The component has no motion code of its own.
Contrast
Computed at build time from the token values, against the background each colour is paired with.
| Token | On | Light | Dark |
|---|---|---|---|
| focus.ring | surface.layer-1 | 6.00:1 AA | 6.72:1 AA |
| fg.muted | surface.layer-1 | 6.53:1 AA | 6.33:1 AA |