Stacks

Base style

<!-- Base -->
<fieldset>
    <div class="grid gs8">
        <div class="grid--cell">
            <input class="s-radio" type="radio" name="example-radio" id="example-item" />
        </div>
        <label class="grid--cell s-label fw-normal" for="example-item">Radio Label</label>
    </div>
</fieldset>

<!-- Disabled -->
<fieldset class="mt8">
    <div class="grid gs8 is-disabled">
        <div class="grid--cell">
            <input class="s-radio" type="radio" name="example-radio-disabled" id="example-item-disabled" disabled />
        </div>
        <label class="grid--cell s-label fw-normal" for="example-item-disabled">Radio Label</label>
    </div>
</fieldset>

Radio Label

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.
Use the fieldset and legend elements for grouping radio options together.

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

Examples

Vertical group

<fieldset class="grid gs8 gsy fd-column">
    <legend class="grid--cell s-label">Which fruit do you like best?</legend>
    <div class="grid--cell">
        <div class="grid gs8 gsx">
            <div class="grid--cell">
                <input class="s-radio" type="radio" name="radio-vert-group" id="choice-vert-radio-1" />
            </div>
            <label class="grid--cell s-label fw-normal" for="choice-vert-radio-1">Apples</label>
        </div>
    </div>
    <div class="grid--cell">
        <div class="grid gs8 gsx">
            <div class="grid--cell">
                <input class="s-radio" type="radio" name="radio-vert-group" id="choice-vert-radio-2" />
            </div>
            <label class="grid--cell s-label fw-normal" for="choice-vert-radio-2">Oranges</label>
        </div>
    </div>
    <div class="grid--cell">
        <div class="grid gs8 gsx">
            <div class="grid--cell">
                <input class="s-radio" type="radio" name="radio-vert-group" id="choice-vert-radio-3" />
            </div>
            <label class="grid--cell s-label fw-normal" for="choice-vert-radio-3">Bananas</label>
        </div>
    </div>
</fieldset>

Which fruit do you like best?

Apples

Oranges

Bananas

Horizontal group

<fieldset class="grid gs8 gsy fd-column">
    <legend class="grid--cell s-label">Which fruit do you like best?</legend>
    <div class="grid--cell">
        <div class="grid gs16">
            <div class="grid--cell">
                <div class="grid gs8 gsx">
                    <div class="grid--cell">
                        <input class="s-radio" type="radio" name="radio-horz-group" id="choice-horz-radio-1" />
                    </div>
                    <label class="grid--cell s-label fw-normal" for="choice-horz-radio-1">Apples</label>
                </div>
            </div>
            <div class="grid--cell">
                <div class="grid gs8 gsx">
                    <div class="grid--cell">
                        <input class="s-radio" type="radio" name="radio-horz-group" id="choice-horz-radio-2" />
                    </div>
                    <label class="grid--cell s-label fw-normal" for="choice-horz-radio-2">Oranges</label>
                </div>
            </div>
            <div class="grid--cell">
                <div class="grid gs8 gsx">
                    <div class="grid--cell">
                        <input class="s-radio" type="radio" name="radio-horz-group" id="choice-horz-radio-3" />
                    </div>
                    <label class="grid--cell s-label fw-normal" for="choice-horz-radio-3">Bananas</label>
                </div>
            </div>
        </div>
    </div>
</fieldset>

Which fruit do you like best?

Apples

Oranges

Bananas

With description copy

<fieldset class="grid gs8 gsy fd-column">
    <legend class="grid--cell s-label">Which fruit do you like best?</legend>
    <div class="grid--cell">
        <div class="grid gs8 gsx">
            <div class="grid--cell">
                <input class="s-radio" type="radio" name="choice-copy-radio" id="choice-copy-radio-1" checked />
            </div>
            <div class="grid--cell">
                <label class="d-block s-label fw-normal" for="choice-copy-radio-1">
                    Apples
                    <p class="s-description">A sweet, edible fruit produced by an apple tree (Malus pumila).</p>
                </label>
            </div>
        </div>
    </div>
    <div class="grid--cell">
        <div class="grid gs8 gsx">
            <div class="grid--cell">
                <input class="s-radio" type="radio" name="choice-copy-radio" id="choice-copy-radio-2" />
            </div>
            <div class="grid--cell">
                <label class="d-block s-label fw-normal" for="choice-copy-radio-2">
                    Oranges
                    <p class="s-description">A fruit of the citrus species Citrus × sinensis in the family Rutaceae.</p>
                </label>
            </div>
        </div>
    </div>
    <div class="grid--cell">
        <div class="grid gs8 gsx">
            <div class="grid--cell">
                <input class="s-radio" type="radio" name="choice-copy-radio" id="choice-copy-radio-3" />
            </div>
            <div class="grid--cell">
                <label class="d-block s-label fw-normal" for="choice-copy-radio-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>
        </div>
    </div>
</fieldset>

Which fruit do you like best?

Apples

A sweet, edible fruit produced by an apple tree (Malus pumila).

Oranges

A fruit of the citrus species Citrus × sinensis in the family Rutaceae.

Bananas

A fruit – botanically a berry – produced by several kinds of large herbaceous flowering plants in the genus Musa.

Validation states

Radio inputs use the same validation states as inputs.

Validation classes

Class	Applies	Description
`.has-warning`	Parent wrapper for radio 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 radio 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 radio and label	Used to notify users that the value they've entered is fine or has been submitted successfully.

Validation examples

<fieldset class="grid gs8 gsy fd-column">
    <legend class="grid--cell s-label">Which fruit do you like best?</legend>
    <div class="grid--cell">
        <div class="grid gs8 gsx has-warning">
            <div class="grid--cell">
                <input class="s-radio" type="radio" name="radio-valid-group" id="choice-valid-radio-1" />
            </div>
            <div class="grid--cell">
                <label class="d-block s-label fw-normal" for="choice-valid-radio-1">
                    Apples
                    <p class="s-input-message"><strong>Note:</strong> Apples are currently not in season.</p>
                </label>
            </div>
        </div>
    </div>
    <div class="grid--cell">
        <div class="grid gs8 gsx has-error">
            <div class="grid--cell">
                <input class="s-radio" type="radio" name="radio-valid-group" id="choice-valid-radio-2" />
            </div>
            <div class="grid--cell">
                <label class="d-block s-label fw-normal" for="choice-valid-radio-2">
                    Oranges
                    <p class="s-input-message">All oranges are currently <strong>out of stock</strong>.</p>
                </label>
            </div>
        </div>
    </div>
    <div class="grid--cell">
        <div class="grid gs8 gsx has-success">
            <div class="grid--cell">
                <input class="s-radio" type="radio" name="radio-valid-group" id="choice-valid-radio-3" />
            </div>
            <div class="grid--cell">
                <label class="d-block s-label fw-normal" 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>
        </div>
    </div>
</fieldset>

Which fruit do you like best?

Apples

Note: Apples are currently not in season.

Oranges

All oranges are currently out of stock.

Bananas

You’ve successfully selected the most amazing fruit in the world.