Product Email Content Brand
Product Email Content Brand

Radio

An input group which can only have one entry selected at a time.

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>

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?

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?

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?

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?