Checkbox
A box to tick: yes or no for one thing, or several choices in a group.
On this page
Playground
State
Background
<label class="feitio-choice"><input type="checkbox">Notify on Discord</label>When to use
- To pick none, one or several options from a list.
- On its own, to agree to something.
When not to use
- Mutually exclusive options: Radios.
- Turning a setting on and off: Switch.
Examples
A group
Title and hint together (space-1), the options right below (space-3), and space-2 between options. The tick is in ink: orange stays for the main action.
Show code
<fieldset class="feitio-fieldset">
<legend class="feitio-label">Avisar por</legend>
<span class="feitio-hint">Marque quantos quiser</span>
<div class="feitio-choices">
<label class="feitio-choice"><input type="checkbox" name="avisar" value="discord" checked>Discord</label>
<label class="feitio-choice"><input type="checkbox" name="avisar" value="email">E-mail</label>
</div>
</fieldset>States
Do and don’t
Do
Box and text clickable together, and the tick in ink.
Don’t
Orange ticks compete with the save button for the orange.
Accessibility
- The whole text is clickable, not just the box.
- In a group, the Fieldset gives the title; the group error appears once, below the options.
Attributes
| Attribute | Values | What for |
|---|---|---|
class="feitio-choices" | around the options | space-2 between options. |
class="feitio-choice" | on the <label> | Box and text clickable together. |
checked, disabled | — | Ticked; disabled. |
aria-invalid="true" | on the fieldset | Group error, below the options. |