Inputs
Input field
Single-line text entry with label, helper text and validation.
Examples
Shown to your team.
Use letters and numbers only.
States
| Default | Hover | Focus visible | Pressed | Disabled | |
|---|---|---|---|---|---|
| Text |
Anatomy
| # | Part | Description | Presence |
|---|---|---|---|
| 1 | Label | Above the field, always visible | Required |
| 2 | Field | Pill, 44 / 52px, 16px padding | Required |
| 3 | Leading / trailing icon | 20 / 16px, decorative | Optional |
| 4 | Helper text | Linked by aria-describedby | Optional |
| 5 | Error message | Icon plus text, replaces helper | Optional |
Specifications
| Heights | Large 52px · Medium 44px |
|---|---|
| Padding | 16px horizontal · 12px vertical |
| Type | Manrope Medium 14px |
| Icon size | 20px (Large) · 16px (Medium) |
Interaction
| Key | Result |
|---|---|
| Tab | Moves focus in; the whole value is not selected |
| Typing | Edits the value |
| Esc | Does nothing by default; clears only in search fields |
| Trigger | Response |
|---|---|
| Hover | Border strengthens |
| Focus | Border turns indigo with a 3px glow |
| Validation | On blur or on submit, not on every keystroke |
Accessibility
role · textbox
1.3.1Info and Relationships1.3.5Identify Input Purpose1.4.11Non-text Contrast3.3.1Error Identification3.3.2Labels or Instructions3.3.3Error Suggestion4.1.2Name, Role, Value
| Requirement | How Rig meets it |
|---|---|
| Label | A real <label for>. A placeholder is a hint, never the label. |
| Purpose | autocomplete tokens (email, name, tel) satisfy 1.3.5 |
| Type | type=email, tel, url bring the right mobile keyboard |
| Required | Mark it in text and with required; do not rely on an asterisk alone |
| Error | aria-invalid="true", message linked by aria-describedby, and the text says how to fix it |
| Boundary | Border is 3:1 against the surface (WCAG 1.4.11) |
Read the matching WAI pattern ↗
Usage
| Do | Don’t |
|---|---|
| Keep labels short and above the field | Do not use a placeholder as a label |
| Say how to fix an error, not just that there is one | Do not clear the field when an error appears |