Checkboxes and radio buttons
Use checkboxes to allow users to select a number of options. This includes no options, a single option, or multiple options. Checkboxes always require a button to apply the intent of the selected option(s).
Use radio buttons when the options are mutually exclusive and the user is required to select a single option from a short list.
Radio buttons should:
- Be used for lists with between 2 and 5 options. Dropdown menus should be used for longer lists.
- Have one option selected by default. All radio groups must have a selection made, therefore a default is mandatory.
- Always be stacked vertically.
Do: Vertically stack radio buttons
Don't: Display radio button inline
How it works
Each checkbox and radio
<label> pairing is wrapped in a
<div> to create our custom control.
We use the sibling selector (
~) for all our
:checked—to properly style our custom form indicator. When combined with the
.custom-control-label class, we can also style the text for each item based on the
We hide the default
opacity and use the
.custom-control-label to build a new custom form indicator in its place with
::after. Unfortunately we can’t build a custom one from just the
<input> because CSS’s
content doesn’t work on that element.
In the checked states, we use base64 embedded SVG icons from Open Iconic. This provides us the best control for styling and positioning across browsers and devices.
Custom checkboxes can also utilize the
If you’re using jQuery, something like this should suffice:
Custom checkboxes and radios can also be disabled. Add the
disabled boolean attribute to the
<input> and the custom indicator and label description will be automatically styled.