Sections

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.

Base style

Section titled 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

Section titled 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 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".

Examples

Section titled Examples

Vertical group

Section titled 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>
Which types of fruit do you like? (Check all that apply)
Which fruit do you like best?

Horizontal group

Section titled 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>
Which types of fruit do you like? (Check all that apply)
Which fruit do you like best?

With description copy

Section titled 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>
Which types of fruit do you like? (Check all that apply)
Which fruit do you like best?

Indeterminate state

Section titled 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

Section titled Validation states

Checkboxes use the same validation states as inputs.

Validation classes

Section titled 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

Section titled 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>
Which types of fruit do you like? (Check all that apply)
Which fruit do you like best?
Edit on GitHub File an issue on GitHub
Deploys by Netlify