Radio

Checkable inputs that visually allow for single selection from multiple options.

Classes

Class	Description	Parent	Modifies
`.s-radio`	Base radio style.	N/A	N/A
`.s-radio__checkmark`	Checkmark style.	`.s-radio`	N/A

Base

Use the .s-radio to wrap input[type="radio"] elements to apply radio styles.

<div class="s-radio">
    <input type="radio" name="example-name" id="example-item" />
    <label class="s-label" for="example-item">Check Label</label>
</div>

Example	Description
Radio label	The base, unchecked state.
Radio label	Disabled, unchecked state.
Radio label	The checked state.
Radio label	Disabled, checked state.

Checkmark

The checkmark style is an alternative to the base radio style. To use the checkmark style, wrap your input and label in a container with the .s-radio__checkmark class.

<label class="s-radio s-radio__checkmark" for="example-item">
    Checkmark Label
    <input type="radio" name="example-name" id="example-item" />
</label>

Example	Class	Description
Checkmark label	`.s-radio__checkmark`	The checkmark, unchecked state.
Checkmark label	`.s-radio__checkmark`	Disabled, unchecked state.
Checkmark label	`.s-radio__checkmark`	The checkmark, checked state.
Checkmark label	`.s-radio__checkmark`	Disabled, checked state.

Accessibility

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

All inputs should have an id attribute.
Be sure to associate the radio label by using the for attribute. The value here is the input’s id.
If you have a group of related 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”.

Radio group

Vertical group

<fieldset class="s-form-group">
    <legend class="s-label">…</legend>
    <div class="s-radio">
        <input type="radio" name="vert-radio" id="vert-radio-1" />
        <label class="s-label" for="vert-radio-1">…</label>
    </div>
    <div class="s-radio">
        <input type="radio" name="vert-radio" id="vert-radio-2" />
        <label class="s-label" for="vert-radio-2">…</label>
    </div>
    <div class="s-radio">
        <input type="radio" name="vert-radio" id="vert-radio-3" />
        <label class="s-label" for="vert-radio-3">…</label>
    </div>
</fieldset>

<!-- Checkmark w/ radio using .s-menu for additional styling -->
<fieldset class="s-menu s-form-group">
    <legend class="s-menu--title">…</legend>
    <div class="s-menu--item">
        <label class="s-menu--action s-radio s-radio__checkmark" for="vert-checkmark-1">
            <input type="radio" name="vert-checkmark" id="vert-checkmark-1" />
            …
        </label>
    </div>
    …
</fieldset>

Horizontal group

<fieldset class="s-form-group s-form-group__horizontal">
    <legend class="s-label">…</legend>
    <div class="s-radio">
        <input type="radio" name="hori-radio" id="hori-radio-1" />
        <label class="s-label" for="hori-radio-1">…</label>
    </div>
    <div class="s-radio">
        <input type="radio" name="hori-radio" id="hori-radio-2" />
        <label class="s-label" for="hori-radio-2">…</label>
    </div>
    <div class="s-radio">
        <input type="radio" name="hori-radio" id="hori-radio-3" />
        <label class="s-label" for="hori-radio-3">…</label>
    </div>
</fieldset>

Which types of fruit do you like?

Apples

Oranges

Bananas

With description copy

<fieldset class="s-form-group">
    <legend class="s-label">…</legend>
    <div class="s-radio">
        <input type="radio" name="desc-radio" id="desc-radio-1" />
        <label class="s-label" for="desc-radio-1">
            …
            <p class="s-description">…</p>
        </label>
    </div>
    …
</fieldset>

<!-- Checkmark w/ radio using .s-menu for additional styling -->
<fieldset class="s-menu s-form-group">
    <legend class="s-menu--title">…</legend>
    <div class="s-menu--item">
        <label class="s-menu--action s-radio s-radio__checkmark" for="desc-checkmark-1">
            <input type="radio" name="desc-checkmark" id="desc-checkmark-1" />
            <div>
                …
                <p class="s-description">…</p>
            </div>
        </label>
    </div>
    …
</fieldset>

Which types of fruit do you like?

Apples

Fresh red apples.

Oranges

Juicy and sweet oranges.

Bananas

Ripe yellow bananas.

Validation states

Radios use the same validation states as inputs.

Validation classes

Class	Description	Applies to
`.has-warning`	Used to warn users that the value they've entered has a potential problem, but it doesn't block them from proceeding.	Parent element
`.has-error`	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.	Parent element
`.has-success`	Used to notify users that the value they've entered is fine or has been submitted successfully.	Parent element

Validation examples

<!-- Radio w/ error -->
<div class="s-radio has-error">
    <input type="radio" name="error-radio" id="error-radio-1" />
    <label class="s-label" for="error-radio-1">
        …
        <p class="s-description">…</p>
    </label>
</div>

<!-- Checkmark w/ success -->
<label class="s-radio s-radio__checkmark has-success" for="success-checkmark-1">
    <input type="radio" name="success-checkmark" id="success-checkmark-1" />
    <div>
        …
        <p class="s-description">…</p>
    </div>
</label>

Which types of fruit do you like?

Apples

Fresh red apples.

Oranges

Juicy and sweet oranges.

Bananas

Ripe yellow bananas.