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>