Checkbox & Radio

Razor
Figma

Checkable inputs that visually allow for multiple options or true/false values.

Deprecation: the markup for checkboxes and radios has changed. Please update your markup to match the new structure detailed on this page.
<!-- Checkbox -->
<div class="s-check-control">
<input class="s-checkbox" type="checkbox" name="example-name" id="example-item" />
<label class="s-label" for="example-item">Checkbox Label</label>
</div>

<!-- Radio -->
<div class="s-check-control">
<input class="s-radio" type="radio" name="example-name-rad" id="example-item-rad" />
<label class="s-label" for="example-item-rad">Radio Label</label>
</div>

<!-- Disabled -->
<div class="s-check-control">
<input class="s-checkbox" type="checkbox" name="example-name" id="example-disabled" disabled />
<label class="s-label" for="example-disabled">Checkbox Label</label>
</div>

<div class="s-check-control">
<input class="s-checkbox" type="checkbox" name="example-name-rad" id="example-disabled-rad" disabled />
<label class="s-label" for="example-disabled-rad">Radio Label</label>
</div>

The best accessibility is semantic HTML. Most screen readers understand how to parse inputs if they’re correctly formatted. When it comes to checkboxes, there are a few things to keep in mind:

  • All inputs should have an id attribute.
  • Be sure to associate the checkbox/radio label by using the for attribute. The value here is the input’s id.
  • If you have a group of related checkboxes or radios, use the fieldset and legend to group them together.

For more information, please read Gov.UK’s article, "Using the fieldset and legend elements".

<!-- Checkbox -->
<fieldset class="s-check-group">
<legend class="s-label">Which types of fruit do you like? <span class="ml4 fw-normal fc-light">(Check all that apply)</span></legend>
<div class="s-check-control">
<input class="s-checkbox" type="checkbox" name="" id="choice-vert-checkbox-1" />
<label class="s-label" for="choice-vert-checkbox-1">Apples</label>
</div>
<div class="s-check-control">
<input class="s-checkbox" type="checkbox" name="" id="choice-vert-checkbox-2" />
<label class="s-label" for="choice-vert-checkbox-2">Oranges</label>
</div>
<div class="s-check-control">
<input class="s-checkbox" type="checkbox" name="" id="choice-vert-checkbox-3" />
<label class="s-label" for="choice-vert-checkbox-3">Bananas</label>
</div>
</fieldset>

<!-- Radio -->
<fieldset class="s-check-group">
<legend class="s-label">Which fruit do you like best?</legend>
<div class="s-check-control">
<input class="s-radio" type="radio" name="choice-vert-radio" id="choice-vert-radio-1" />
<label class="s-label" for="choice-vert-radio-1">Apples</label>
</div>
<div class="s-check-control">
<input class="s-radio" type="radio" name="choice-vert-radio" id="choice-vert-radio-2" />
<label class="s-label" for="choice-vert-radio-2">Oranges</label>
</div>
<div class="s-check-control">
<input class="s-radio" type="radio" name="choice-vert-radio" id="choice-vert-radio-3" />
<label class="s-label" for="choice-vert-radio-3">Bananas</label>
</div>
</fieldset>
Which types of fruit do you like? (Check all that apply)
Which fruit do you like best?
<!-- Checkbox -->
<fieldset class="s-check-group s-check-group__horizontal">
<legend class="s-label">Which types of fruit do you like? <span class="ml4 fw-normal fc-light">(Check all that apply)</span></legend>
<div class="s-check-control">
<input class="s-checkbox" type="checkbox" name="" id="choice-horz-checkbox-1" />
<label class="s-label" for="choice-horz-checkbox-1">Apples</label>
</div>
<div class="s-check-control">
<input class="s-checkbox" type="checkbox" name="" id="choice-horz-checkbox-2" />
<label class="s-label" for="choice-horz-checkbox-2">Oranges</label>
</div>
<div class="s-check-control">
<input class="s-checkbox" type="checkbox" name="" id="choice-horz-checkbox-3" />
<label class="s-label" for="choice-horz-checkbox-3">Bananas</label>
</div>
</fieldset>

<!-- Radio -->
<fieldset class="s-check-group s-check-group__horizontal">
<legend class="s-label">Which fruit do you like best?</legend>
<div class="s-check-control">
<input class="s-radio" type="radio" name="choice-horz-radio" id="choice-horz-radio-1" />
<label class="s-label" for="choice-horz-radio-1">Apples</label>
</div>
<div class="s-check-control">
<input class="s-radio" type="radio" name="choice-horz-radio" id="choice-horz-radio-2" />
<label class="s-label" for="choice-horz-radio-2">Oranges</label>
</div>
<div class="s-check-control">
<input class="s-radio" type="checkbox" name="choice-horz-radio" id="choice-horz-radio-3" />
<label class="s-label" for="choice-horz-radio-3">Bananas</label>
</div>
</fieldset>
Which types of fruit do you like? (Check all that apply)
Which fruit do you like best?
<fieldset class="s-check-group">
<legend class="s-label">Which types of fruit do you like? <span class="ml4 fw-normal fc-light">(Check all that apply)</span></legend>
<div class="s-check-control">
<input class="s-checkbox" type="checkbox" name="" id="choice-copy-checkbox-1" />
<label class="s-label" for="choice-copy-checkbox-1">
Apples
<p class="s-description">A sweet, edible fruit produced by an apple tree (Malus pumila).</p>
</label>
</div>
<div class="s-check-control">
<input class="s-checkbox" type="checkbox" name="" id="choice-copy-checkbox-2" />
<label class="s-label" for="choice-copy-checkbox-2">
Oranges
<p class="s-description">A fruit of the citrus species Citrus × sinensis in the family Rutaceae.</p>
</label>
</div>
<div class="s-check-control">
<input class="s-checkbox" type="checkbox" name="" id="choice-copy-checkbox-3" />
<label class="s-label" for="choice-copy-checkbox-3">
Bananas
<p class="s-description">A fruit – botanically a berry – produced by several kinds of large herbaceous flowering plants in the genus Musa.</p>
</label>
</div>
</fieldset>
Which types of fruit do you like? (Check all that apply)
Which fruit do you like best?

Checkboxes can be styled by using the :indeterminate pseudo class.

Note: The :indeterminate pseudo class can only be set via JavaScript. Use the HTMLInputElement object's indeterminate property to set the state.
<fieldset class="s-check-group">
<div class="s-check-control">
<input class="s-checkbox" type="checkbox" name="" id="indeterminate-checkbox-1" />
<label class="s-label" for="indeterminate-checkbox-1">Select all</label>
</div>
</fieldset>

<script>
document.getElementById("indeterminate-checkbox-1").indeterminate = true;
</script>

Checkboxes use the same validation states as inputs.

Class Applies Description
.has-warning Parent wrapper for checkbox and label Used to warn users that the value they’ve entered has a potential problem, but it doesn’t block them from proceeding.
.has-error Parent wrapper for checkbox and label Used to alert users that the value they’ve entered is incorrect, not filled in, or has a problem which will block them from proceeding.
.has-success Parent wrapper for checkbox and label Used to notify users that the value they’ve entered is fine or has been submitted successfully.
<!-- Checkbox -->
<fieldset class="s-check-group">
<legend class="s-label">Which types of fruit do you like? <span class="ml4 fw-normal fc-light">(Check all that apply)</span></legend>
<div class="s-check-control has-warning">
<input class="s-checkbox" type="checkbox" name="" id="choice-valid-checkbox-1" />
<label class="s-label" for="choice-valid-checkbox-1">
Apples
<p class="s-input-message"><strong>Note:</strong> Apples are currently not in season.</p>
</label>
</div>
<div class="s-check-control has-error">
<input class="s-checkbox" type="checkbox" name="" id="choice-valid-checkbox-2" />
<label class="s-label" for="choice-valid-checkbox-2">
Oranges
<p class="s-input-message">All oranges are currently <strong>out of stock</strong>.</p>
</label>
</div>
<div class="s-check-control has-success">
<input class="s-checkbox" type="checkbox" name="" id="choice-valid-checkbox-3" />
<label class="d-block mb4 s-label fw-normal" for="choice-valid-checkbox-3">
Bananas
<p class="s-input-message">You’ve successfully selected the most amazing fruit in the world.</p>
</label>
</div>
</fieldset>

<!-- Radio -->
<fieldset class="s-check-group">
<legend class="s-label">Which fruit do you like best?</legend>
<div class="s-check-control has-warning">
<input class="s-radio" type="radio" name="choice-valid-radio" id="choice-valid-radio-1" />
<label class="s-label" for="choice-valid-radio-1">
Apples
<p class="s-input-message"><strong>Note:</strong> Apples are currently not in season.</p>
</label>
</div>
<div class="s-check-control has-error">
<input class="s-radio" type="radio" name="choice-valid-radio" id="choice-valid-radio-2" />
<label class="s-label" for="choice-valid-radio-2">
Oranges
<p class="s-input-message">All oranges are currently <strong>out of stock</strong>.</p>
</label>
</div>
<div class="s-check-control has-success">
<input class="s-radio" type="radio" name="choice-valid-radio" id="choice-valid-radio-3" />
<label class="s-label" for="choice-valid-radio-3">
Bananas
<p class="s-input-message">You’ve successfully selected the most amazing fruit in the world.</p>
</label>
</div>
</fieldset>
Which types of fruit do you like? (Check all that apply)
Which fruit do you like best?
Deploys by Netlify