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>