Text input
A 40px field on newsprint with no border. Focus draws a thin black border.
Search, beside a content switcher
A search field leads with a magnifying glass; type="search" is all it needs. Without a visible label, give the field an aria-label. At 40px it matches a medium content switcher.
Parts
| Part | Markup | Look |
|---|---|---|
| Field | .sys-field, a <label> around the parts | Stacked, 6px apart |
| Label | .sys-field__label | 13px caps label |
| Input | input.sys-input or textarea.sys-input | 40px tall (textarea 112px and up), newsprint, no border; thin black border on focus; 16px body |
| Search | input.sys-input with type="search" | Leads with a 16px magnifying glass, 12px in; the text starts after it |
| Help | .sys-field__help (optional) | 14px, muted |
| Error | aria-invalid="true" on the input, .sys-field__error after it | A thin magenta rule around the field, kept on focus; the message under it in bold magenta |
Stipulations
- Text fields are newsprint with no border. Every text field, search box and textarea fills with newsprint; the border appears only on focus. On a newsprint panel (table, card, paper) the field turns white so it still shows.
- 40px tall. The same height as a medium content switcher and close to a 44px touch target with its label; beside a switcher, use the medium size so the row lines up.
- Square corners. Focus draws a thin black border (the space is held by a clear border, so nothing shifts); no glow and no second ring.
- Labels sit above in caps. Placeholder text is a hint, never the label.
- Errors are magenta: a thin magenta rule around the field and a bold magenta message under it that says what to do (“Add the rest of the address”). Never red. Set
aria-invalid="true"and pointaria-describedbyat the message. - Body text is 16px so phones don’t zoom in when the field gets focus.