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)

A checkbox or radio with the disabled attribute will be styled appropriately. To have the <label> for the checkbox or radio also display a "not-allowed" cursor when the user hovers over the label, add the .disabled class to your .radio, .checkbox or <fieldset>.

.checkbox





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.


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

let checkbox = document.getElementById('indeterminate-checkbox');
checkbox.indeterminate = true;

let checkboxLabel = checkbox.labels[0];
checkboxLabel.ariaChecked = 'mixed';

checkbox.addEventListener('change', () => {
    checkboxLabel.ariaChecked = checkbox.checked;
});

Secondary/outline style

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

.checkbox.checkbox-outline







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
.radio





Secondary/outline style

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

.radio.radio-outline





Read only style

Add the readonly attribute to the <input>.




Inline checkboxes and radios

.checkbox.checkbox-inline


.radio.radio-inline 

				
<!-- Default checkboxes (stacked) -->
<div class="checkbox">
  <input type="checkbox" id="checkbox-example"> 
  <label for="checkbox-example">Option one is this and that — be sure to include why it's great </label>
</div>

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

<!-- Outline/secondary checkboxes style -->
<div class="checkbox checkbox-outline">
  <input type="checkbox" id="checkbox-outline-example"> 
  <label for="checkbox-outline-example">outline/secondary checkboxes option</label>
</div>

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

<!-- Read only checkboxes -->
<div class="checkbox">
  <input type="checkbox" id="checkbox-readonly-example" readonly> 
  <label for="checkbox-readonly-example">readonly checkboxes option</label>
</div>

<!-- Default radio buttons (stacked) -->
<div class="radio">
  <input type="radio" id="radio-example-1"> 
  <label for="radio-example-1">Option one is this and that—be sure to include why it's great</label>
</div>

<div class="radio disabled">
  <input type="radio" disabled="disabled" checked="checked" id="radio-example-3"> 
  <label for="radio-example-3">Option three is disabled</label>
</div>

<!-- Outline/secondary radio-box style -->
<div class="radio radio-outline">
  <input type="radio" id="radio-outline-example"> 
  <label for="radio-outline-example">outline/secondary radio-box option</label>
</div>

<!-- Read only radio-box -->
<div class="radio">
  <input type="radio" id="radio-readonly-example" readonly> 
  <label for="radio-readonly-example">readonly radioes option</label>
</div>

<!-- Inline checkboxes -->
<div class="checkbox checkbox-inline">
  ...
</div>

<!-- Inline radio buttons -->
<div class="radio radio-inline">
  ...
</div>