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>