Input draft
A single-line text field with a label, optional leading icon, and validation states — the workhorse of the registration and CRM forms. Field shell + label + optional icon + optional error message.
Source: specs/input/spec.json · specs/input/notes.md
Live preview
Rendered from the tier-2 component tokens + foundation tokens per this spec — a spec-faithful rendering, not the production component (those live in each product repo). Variants and states come from the spec below.
Anatomy
label- The field label above the shell — semibold, label-size, subtle colour.
shell- The input box: surface background, hairline border, card radius, touch-min height, left padding for the icon.
icon- Optional leading icon inside the shell, subtle colour.
value- The typed value / placeholder text.
error- Optional validation message below the shell, in the danger colour.
Token bindings
Each binding's value is resolved live from the built
@beestera/tokens output — tier-2 component tokens
(--input-*) collapse through the foundation tier.
| Part | Property | Token | Resolved | Applies to |
|---|---|---|---|---|
label | color | --color-subtle | #71717a | — |
label | font-size | --text-label | 0.8125rem | — |
shell | background | --color-surface | #ffffff | — |
shell | border-color | --color-border | #e4e4e7 | — |
shell | border-radius | --radius-card | 0.75rem | — |
shell | min-height | --spacing-touch-min | 2.75rem | — |
icon | color | --color-subtle | #71717a | — |
value | color | --color-ink | #181818 | — |
value | color | --color-neutral-400 | #a1a1aa | state:default |
shell | border-color | --color-brand | #ffd700 | state:focus |
shell | border-color | --color-danger | #dc2626 | state:error |
error | color | --color-danger | #dc2626 | — |
State matrix
default- Empty shows placeholder in neutral-400; filled shows the value in ink.
focus- Border turns brand-yellow with a soft brand focus glow.
disabled- Non-editable, reduced emphasis. (Not yet specified in detail — see notes.)
Accessibility
- Role
- textbox — a native <input> with a programmatically associated <label>.
- Contrast
- Value vs surface >= 4.5:1 (ink passes). Placeholder is neutral-400 and MUST NOT be the only carrier of essential information. Error text (danger) vs surface passes AA.
- Focus order
- Focusable in DOM order; the focus state MUST be visible (border + ring), never suppressed. The error message MUST be associated via aria-describedby.
- Target size
- Shell height >= 44px (--spacing-touch-min).
- Label is always present and associated — placeholder is not a label substitute.
- Error state pairs the danger border with the message; colour alone MUST NOT convey the error (include text).
Usage
Do
- Always pair the shell with a visible, associated <label>.
- Use the leading icon to reinforce the field's meaning (user, mail, calendar, location).
- Show a specific, actionable error message ('Please pick U10-U14 for this camp').
Don't
- Don't use the placeholder as the label.
- Don't signal errors with border colour only.
- Don't hardcode the border/radius literals — bind to the tokens above.
Implementations
Not implemented in any product repo yet. This repo owns the spec; implementations land in each product repo on their own cadence.
Figma source: Field/TextInput