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.

Example
HTML

Option one is this

Option two - checked

Option three - disabled

Option four - checked and disabled

<div class="checkbox">
	<input type="checkbox" id="checkbox-example-1">
	<label for="checkbox-example-1">Option one is this</label>
</div>
<br>
<div class="checkbox mb-24">
	<input type="checkbox" id="checkbox-outline-example-4" checked="checked">
	<label for="checkbox-outline-example-4">Option two - checked</label>
</div>
<br>
<div class="checkbox">
	<input class="disabled" type="checkbox" tabindex="-1" aria-disabled="true" id="checkbox-example-2">
	<label for="checkbox-example-2">Option three - disabled</label>
</div>
<br>
<div class="checkbox disabled">
	<input disabled="disabled" type="checkbox" id="checkbox-example-3" checked="checked">
	<label for="checkbox-example-3">Option four - checked and 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.

Example
HTML

Indeterminate option with .mixed class

Indeterminate option and disabled

<div class="checkbox mixed">
	<input type="checkbox" id="mixed-checkbox-example">
	<label for="mixed-checkbox-example" aria-checked="mixed">Indeterminate option with <code>.mixed</code> class</label>
</div>
<br>
<div class="checkbox mixed">
	<input disabled type="checkbox" id="mixed-checkbox-example-2">
	<label for="mixed-checkbox-example-2" aria-checked="mixed">Indeterminate option and disabled</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).

Example
HTML

Indeterminate/mixed option

<div class="checkbox">
	<input type="checkbox" id="indeterminate-checkbox">
	<label for="indeterminate-checkbox" aria-checked="mixed">Indeterminate/mixed option</label>
</div>
<script>
	let checkbox = document.getElementById('indeterminate-checkbox');
	let checkboxLabel = checkbox.labels[0];
	checkbox.indeterminate = true;
	checkbox.addEventListener('change', () => {
		checkboxLabel.innerText =  checkbox.checked ? 'Checked option' : 'Unchecked option';
		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.

Example
HTML

Option one - unchecked

Option two - mixed

Option three - checked

Option four - unchecked and disabled

Option five - mixed and disabled

Option six - checked and disabled

<div class="checkbox checkbox-outline">
	<input type="checkbox" id="checkbox-outline-example-1">
	<label for="checkbox-outline-example-1">Option one - unchecked</label>
</div>
<br>
<div class="checkbox checkbox-outline mixed">
	<input type="checkbox" id="checkbox-outline-example-2">
	<label for="checkbox-outline-example-2">Option two - mixed</label>
</div>
<br>
<div class="checkbox checkbox-outline mb-32">
	<input type="checkbox" id="checkbox-outline-example-3" checked="checked">
	<label for="checkbox-outline-example-3">Option three - checked</label>
</div>
<br>
<div class="checkbox checkbox-outline disabled">
	<input disabled="disabled" type="checkbox" id="checkbox-outline-example-4">
	<label for="checkbox-outline-example-4">Option four - unchecked and disabled</label>
</div>
<br>
<div class="checkbox checkbox-outline mixed disabled">
	<input type="checkbox" id="checkbox-outline-example-5" tabindex="-1">
	<label for="checkbox-outline-example-5">Option five - mixed and disabled</label>
</div>
<br>
<div class="checkbox checkbox-outline disabled">
	<input disabled type="checkbox" id="checkbox-outline-example-6" checked="checked">
	<label for="checkbox-outline-example-6">Option six - checked and 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

Example
HTML

Option one selecting it will deselect option two

Option two is checked

Option three is disabled

Option four is checked and disabled

<div class="radio">
	<input name="optionsRadios" id="optionsRadios1" value="option1" type="radio">
	<label for="optionsRadios1">Option one selecting it will deselect option two</label>
</div>
<br>
<div class="radio mb-32">
	<input name="optionsRadios" id="optionsRadios2" value="option2" checked="checked" type="radio">
	<label for="optionsRadios2">Option two is checked</label>
</div>
<br>
<div class="radio disabled">
	<input name="optionsRadios" id="optionsRadios3" value="option3" disabled="disabled" type="radio">
	<label for="optionsRadios3">Option three is disabled</label>
</div>
<br>
<div class="radio disabled">
	<input name="optionsRadiosa" id="optionsRadios4" value="option4" disabled type="radio" checked>
	<label for="optionsRadios4">Option four is checked and disabled</label>
</div>

Secondary/outline style

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

Example
HTML

Option one will deselect option two

Option one is checked

Option three is disabled

Option four is checked and disabled

<div class="example-box example-box-border-only bg-default">
    <div class="radio radio-outline">
        <input name="optionsRadiosOutline" id="optionsRadiosOutline1" value="option1" type="radio">
        <label for="optionsRadiosOutline1">Option one will deselect option two</label>
    </div>
    <br>
    <div class="radio radio-outline mb-32">
        <input name="optionsRadiosOutline" id="optionsRadiosOutline2" value="option2" checked="checked" type="radio">
        <label for="optionsRadiosOutline2">Option one is checked</label>
    </div>
    <br>
    <div class="radio radio-outline disabled">
        <input name="optionsRadiosOutline" id="optionsRadiosOutline3" value="option3" disabled="disabled" type="radio">
        <label for="optionsRadiosOutline3">Option three is disabled</label>
    </div>
    <br>
    <div class="radio radio-outline disabled">
        <input name="optionsRadiosOutlineA" id="optionsRadiosOutline4" value="option4" disabled="disabled" type="radio" checked="checked">
        <label for="optionsRadiosOutline4">Option four is checked and disabled</label>
    </div>
</div>

Readonly style

Add the readonly attribute to the <input>.

Example
HTML

<form class="mb-32">
    <div class="checkbox">
        <input type="checkbox" id="checkbox-readonly-example-1" tabindex="-1" readonly>
        <label for="checkbox-readonly-example-1">Option one - unchecked</label>
    </div>
    <br>
    <div class="checkbox">
        <input type="checkbox" id="checkbox-readonly-example-2" tabindex="-1" checked="checked" readonly>
        <label for="checkbox-readonly-example-2">Option two - checked</label>
    </div>
    <br>
    <div class="checkbox mixed">
        <input type="checkbox" id="checkbox-readonly-example-3" tabindex="-1" readonly>
        <label for="checkbox-readonly-example-3">Option three - mixed</label>
    </div>
</form>

<form>
    <div class="radio">
        <input type="radio" id="radio-readonly-example-1" tabindex="-1" readonly>
        <label for="radio-readonly-example-1">Option one - unchecked</label>
    </div>
    <br>
    <div class="radio">
        <input type="radio" id="radio-readonly-example-2" tabindex="-1" checked="checked" readonly>
        <label for="radio-readonly-example-2">Option two - checked</label>
    </div>
</form>

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

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

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

Example
HTML

<form action="" class="d-flex flex-column align-items-start mb-32">
	<div class="checkbox">
		<input type="checkbox" id="flexCheckbox1" value="option1"> <label for="flexCheckbox1">Inline checkbox 1</label>
	</div>
	<div class="checkbox">
		<input type="checkbox" id="flexCheckbox2" value="option2"> <label for="flexCheckbox2">Inline checkbox 2</label>
	</div>
	<div class="checkbox">
		<input type="checkbox" id="flexCheckbox3" value="option3"> <label for="flexCheckbox3">Inline checkbox 3</label>
	</div>
</form>