Checkboxes and radio buttons

Checkboxes

Checkboxes let the user toggle a single option for switching a feature on or off. Each checkbox has a label to the right with the name of the option. Related checkboxes can be grouped with a common label to the left. Read more about the placement of labels (common mistakes to avoid) and checkboxes in the UX Guidelines.

Use when:

  • The user has to set an option that is either true or false
  • Changing state may need some additional steps (OK, Save, or similar)

The disabled style will be applyed for any of this: add .disabled class to your .radio, .checkbox or <fieldset>, or disabled attribute or disabled class on the input.

					
<div class="checkbox"> <input type="checkbox" id="checkbox-example"> <label for="checkbox-example">Option one is this</label> </div>
<div class="checkbox disabled"> <input type="checkbox" disabled id="checkbox-example"> <label for="checkbox-example">Option two is disabled</label> </div>

Indeterminate / mixed state

The third checkboxes state, when is between checked and unchecked, can be added by adding .mixed class to the wrapper that contain the .checkbox class.

					
<div class="checkbox mixed"> <input type="checkbox" id="indeterminate-checkbox-example"> <label for="indeterminate-checkbox-example" aria-checked="mixed">indeterminate checkboxes option</label> </div>
<div class="checkbox mixed"> <input type="checkbox" disabled id="indeterminate-checkbox-example"> <label for="indeterminate-checkbox-example" aria-checked="mixed">indeterminate checkboxes option</label> </div>

Or you can utilize the :indeterminate pseudo class (MDN Web Docs or caniuse) when manually set via JavaScript (there is no available HTML attribute for specifying it).

					
<div class="checkbox mixed"> <input type="checkbox" id="indeterminate-checkbox-example"> <label for="indeterminate-checkbox-example" aria-checked="mixed">indeterminate checkboxes option</label> </div>
<script> let checkbox = document.getElementById('indeterminate-checkbox'); checkbox.indeterminate = true; let checkboxLabel = checkbox.labels[0]; checkboxLabel.ariaChecked = 'mixed'; checkbox.addEventListener('change', () => { checkboxLabel.ariaChecked = checkbox.checked; }); </script>

Secondary/outline style

For the secondary style of the checkbox just add the .checkbox-outline class to the .checkbox wrapper.

					
<div class="checkbox checkbox-outline"> <input type="checkbox" id="checkbox-outline-example"> <label for="checkbox-outline-example">outline/secondary checkboxes option</label> </div>
<div class="checkbox checkbox-outline disabled"> <input disabled type="checkbox" id="checkbox-outline-example2"> <label for="checkbox-outline-example2">outline/secondary checkboxes option - disabled</label> </div>

Radio buttons

Radio buttons let the user choose one option out of two or more choices. Each radio button has a label to the right with the name of the option. Related radio buttons should be grouped with a common label unless the options are self-explanatory. Read more about the placement of labels (common mistakes to avoid) and radio buttons in the UX Guidelines.

Use when:

  • The user needs to choose one value out of a predefined set of options
  • The user benefits from getting guidance on what to choose
  • It is useful to see all options at the same time
  • The choices needs to be emphasized
					
<div class="radio"> <input type="radio" id="radio-example-1"> <label for="radio-example-1">Option one is this</label> </div>
<div class="radio disabled"> <input type="radio" disabled checked id="radio-example-2"> <label for="radio-example-2">Option two is disabled</label> </div>

Secondary/outline style

For the secondary style of the checkbox just add the .radio-outline class to the .radio wrapper.

					
<div class="radio radio-outline"> <input type="radio" id="radio-example-1"> <label for="radio-example-1">Option one is this</label> </div>
<div class="radio radio-outline disabled"> <input type="radio" disabled checked id="radio-example-2"> <label for="radio-example-2">Option two is disabled</label> </div>

Readonly style

Add the readonly attribute to the <input>.

					
<div class="checkbox"> <input type="checkbox" id="checkbox-readonly-example" readonly> <label for="checkbox-readonly-example">Readonly checkboxe</label> </div>
<div class="radio"> <input type="radio" id="radio-readonly-example" readonly> <label for="radio-readonly-example">Readonly radio button</label> </div>

Inline checkboxes and radios

					
<div class="checkbox checkbox-inline"> ... </div>
<div class="radio radio-inline"> ... </div>