Checkbox & Radio
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.
Base style
<!-- 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>Accessibility
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
idattribute. - Be sure to associate the checkbox/radio label by using the
forattribute. The value here is the input’sid. - If you have a group of related checkboxes or radios, use the
fieldsetandlegendto group them together.
For more information, please read Gov.UK’s article, “Using the fieldset and legend elements”.
Examples
Vertical group
<!-- 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>Horizontal group
<!-- 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>With description copy
<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>Indeterminate state
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>Validation states
Checkboxes use the same validation states as inputs.
Validation classes
| 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. |
Validation examples
<!-- 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>