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 

					


<form action="">
  <div class="checkbox mr-24">
    <input type="checkbox" id="inlineCheckbox1" name="opt1" value="option1"> 
    <label for="inlineCheckbox1">Inline checkbox 1</label>
  </div>
  <div class="checkbox mr-24">
    <input type="checkbox" id="inlineCheckbox2" name="opt2" value="option2"> 
    <label for="inlineCheckbox2">Inline checkbox 2</label>
  </div>
  <div class="checkbox mr-24">
    <input type="checkbox" id="inlineCheckbox3" name="opt3" value="option3"> 
    <label for="inlineCheckbox3">Inline checkbox 3</label>
  </div>
</form>




<form action="">
  <div class="radio mr-24">
    <input type="radio" id="inlineRadio1" name="optradio" value="option1"> 
    <label for="inlineRadio1">Inline radio 1</label>
  </div>
  <div class="radio mr-24">
    <input type="radio" id="inlineRadio2" name="optradio" value="option2"> 
    <label for="inlineRadio2">Inline radio 2</label>
  </div>
  <div class="radio mr-24">
    <input type="radio" id="inlineRadio3" name="optradio" value="option3"> 
    <label for="inlineRadio3">Inline radio 3</label>
  </div>
</form>
<div class="radio">
  ...
</div>

Checkboxes and radios in a block/list format

The vertical/list format of the checkboxes and radio boxes can be achieved by using the clasic </br> tag, a different aproch is by using an unordered list element, or flex boxes helper classes on a wrapper for the items.

In the next example is presented the flexbox helper classes approach, with a flex-direction column and align-items value as flex-start

			


<form action="" class="d-flex flex-column align-items-start">
  <div class="checkbox mr-24">
    <input type="checkbox" id="inlineCheckbox1" name="opt1" value="option1"> 
    <label for="inlineCheckbox1">Inline checkbox 1</label>
  </div>
  <div class="checkbox mr-24">
    <input type="checkbox" id="inlineCheckbox2" name="opt2" value="option2"> 
    <label for="inlineCheckbox2">Inline checkbox 2</label>
  </div>
  <div class="checkbox mr-24">
    <input type="checkbox" id="inlineCheckbox3" name="opt3" value="option3"> 
    <label for="inlineCheckbox3">Inline checkbox 3</label>
  </div>
</form>