Atoms
The smallest parts: one control or element, with the label it needs to be usable. Split an atom any further and it stops meaning anything.
Actions
- Button
- A native <button> on button-face with a 1px control-border, 4px 8px padding and a 24×24px minimum target.
Navigation
- Link
- An <a href> in link blue, underlined, turning link-visited purple once visited and link-active red while pressed.
Forms
- Checkbox
- A native <input type="checkbox"> drawn at 18×18px inside a 24px target, filled with accent when checked.
- Custom select
- A real <select> styled with appearance: base-select, the newest HTML form control update.
- Radio
- A native <input type="radio"> at 18×18px in a 24px target, radius-round, filled with accent when selected.
- Select
- A native <select> on field with a control-border, 16px text and the browser's own option list.
- Slider
- A native <input type="range"> with its value shown in words beside it.
- Switch
- A native <input type="checkbox" role="switch">, drawn 44×24px with a sliding knob.
- Text field
- A <label> above an <input> or <textarea> on field, bordered in control-border, typed text in field-text at 16px.
Status
Disclosure
- Details
- A native <details> with a <summary>: keyboard toggling and open/closed state announced to screen readers.