UICheckboxes, radios and switches
Choose several, choose one, or turn something on and off. One meaning each, with their label always visible and clickable.
These three controls answer different questions. A checkbox is a yes/no that is saved with the form. A radio picks one option of a group. A switch changes a setting now, and is a checkbox that looks like an on/off lever.
When to use it
Use it
- A checkbox for options that can be combined, and for one yes/no inside a form.
- Radios for 2 to 5 options where one must be chosen; the group has a
fieldsetandlegend. - A switch only for a setting that applies the moment it changes.
- The label is part of the click target:
labelwithfor.
Don't
- Use a switch in a form that has a Save button; use a checkbox.
- Use a checkbox where only one choice is valid.
- Hide the label or replace it with an icon.
- Redraw the box, the dot or the track in a plugin.
Anatomy
A control has the box (square, round or a track with a knob), the mark inside it when it is on, and the label at its side. Rows of them stack with the spacing of the form, or sit side by side with form-check-inline.
Variants and states
This Moodle version has no dark mode: examples stay light.
This Moodle version has no dark mode: examples stay light.
This Moodle version has no dark mode: examples stay light.
This Moodle version has no dark mode: examples stay light.
Combinations
| Combination | Use it for |
|---|---|
| Checkbox × group | Several that can be combined. In a fieldset with a legend, one under the other or in a line (form-check-inline). |
| Radio × group | 2 to 5 options where exactly one must be chosen. Always with one selected by default when there is a sensible default. |
| Switch × immediate | A setting that applies the moment it changes, with the label saying what it turns on (“Notifications”). |
| Check × validation | is-invalid with its message under the label; the label turns to the danger colour too. |
What Didactika changes and why
| What we changed | Why it helps |
|---|---|
| 18 px boxes with a 1.5 px border of 3:1 contrast | Bootstrap’s boxes are small and pale. These are easy to hit and always visible, empty or not. |
| The mark is white on the primary colour | A checked box is the most saturated thing in the form, so the state is read at a glance and not from the shape of a tick. |
| The switch has a gap to its label and a knob with no colour of its own | The label never touches the track, and the knob works with any theme colour. |
| Disabled controls dim their label too | The whole row reads as unavailable, not only the box. |
Classes
| Class | What it does |
|---|---|
form-check |
Wraps a control and its label |
form-check-input, form-check-label |
The control and its label |
form-check-inline |
Puts options on one line |
form-switchcustom-switch |
Turns the checkbox into a switch |
is-invalid |
The invalid state, with its message |
In this version
Bootstrap 5.3 draws the focus as a soft ring and keeps every colour in CSS variables (--bs-*), so a theme recolours a control with one variable. A switch is a form-check with form-switch and role="switch".
Bootstrap 4.6 draws the focus as a coloured shadow and compiles the colours of every control, so a theme recolours it by rebuilding its stylesheet. A switch is a custom-control custom-switch with a custom-control-input and a custom-control-label.
Bootstrap 4.6 draws the focus as a coloured shadow and compiles the colours of every control, so a theme recolours it by rebuilding its stylesheet. A switch is a custom-control custom-switch with a custom-control-input and a custom-control-label.
Accessibility
- The label is clickable and read by screen readers; never an
inputwithout one. - A group of radios or checkboxes sits in a
fieldsetwith alegend. - A switch has
role="switch"and keeps the state inchecked. - Space toggles, arrows move inside a radio group: keep the native inputs.
- Never signal the state with colour alone: the mark inside must change.