Checkboxes

Let users select one or more options by using the checkboxes component.

When to use this component

Use the checkboxes component when you need to help users:

select multiple options from a list
toggle a single option on or off

When not to use this component

Do not use the checkboxes component if users can only choose one option from a selection. In this case, use the radios component.

Formatted example

You want to hear about events taking place in:

Select all that apply.

England

Northern Ireland

Scotland

Wales

Outside the UK

Select this option if you are posted overseas

HTML code

<fieldset class="fieldset" id="events-in" aria-describedby="events-in--hint">

    <legend>
        You want to hear about events taking place in:
    </legend>
    <p id="events-in--hint" class="hint">
        Select all that apply.
    </p>
    <div class="checkboxes">
        <div class="checkboxes--item">
            <input class="checkboxes--input" id="events-in--england" name="events-in" type="checkbox" value="england">
            <label class="checkboxes--label" for="events-in--england">
                England
            </label>
        </div>
        <div class="checkboxes--item">
            <input class="checkboxes--input" id="events-in--northern-ireland" name="events-in" type="checkbox" value="northern-ireland">
            <label class="checkboxes--label" for="events-in--northern-ireland">
                Northern Ireland
            </label>
        </div>
        <div class="checkboxes--item">
            <input class="checkboxes--input" id="events-in--scotland" name="events-in" type="checkbox" value="scotland">
            <label class="checkboxes--label" for="events-in--scotland">
                Scotland
            </label>
        </div>
        <div class="checkboxes--item">
            <input class="checkboxes--input" id="events-in--wales" name="events-in" type="checkbox" value="wales">
            <label class="checkboxes--label" for="events-in--wales">
                Wales
            </label>
        </div>
        <div class="checkboxes--item">
            <input class="checkboxes--input" id="events-in--overseas" name="events-in" type="checkbox" value="overseas">
            <label class="checkboxes--label" for="overseas">
                Outside the UK
                <div id="events-in--overseas--item-hint" class="hint checkboxes-hint">
                    Select this option if you are posted overseas
                </div>
            </label>
        </div>
    </div>

</fieldset>