Close

Radio button element

Radio buttons are for selecting one option from many, while checkboxes are for selecting one or several options in a list.

Where do you live?

or

<form>
    <fieldset>
        <legend>Where do you live?</legend>
        <div class="field">
            <div class="control">
                <label class="radio">
                    <input type="radio" name="live-group" value="England, Northern Ireland or Wales">
                    England, Northern Ireland or Wales
                </label>
            </div>
        </div>
        <div class="field">
            <div class="control">
                <label class="radio">
                    <input type="radio" name="live-group" value="Scotland">
                    Scotland
                </label>
            </div>
        </div>
        <p class="help">or</p>
        <div class="field">
            <div class="control">
                <label class="radio">
                    <input type="radio" name="live-group" value="Channel Islands or Isle of Man">
                    Channel Islands or Isle of Man
                </label>
            </div>
        </div>
    </fieldset>
</form>

Usage

Wrap the individual radio buttons with the .radio class for spacing.

For more than two options, radio buttons should be stacked.

The following form controls classes are supported: .label, .input, .textarea, .select, .checkbox, .radio, .button, .help.

Each of them should be wrapped in a .control container.

When combining several controls in a form, use the .field class as a container, to keep the spacing consistent.

Accessibility

Use the <label> element to associate text and <input> form control.

Using <fieldset> and <legend> ensures that the text description is read to screen reader users when the grouping is navigated to.

Fieldset and legend should only be used to associate groups of controls when a higher level description is necessary. Single checkboxes or basic radio buttons (such as male/female for gender) that make sense from their labels alone do not require fieldset and legend.

If you have any questions or suggestions for improvements, please contact the Web Team.