Close

Checkbox

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

Select your pizza toppings

Select all that apply

<form>
    <fieldset>
        <legend>Select your pizza toppings</legend>
        <p>Select all that apply</p>
        <div class="field">
            <div class="control">
                <label class="checkbox">
                    <input type="checkbox" name="toppings" value="ham">
                    Ham
                </label>
            </div>
        </div>
        <div class="field">
            <div class="control">
                <label class="checkbox">
                    <input type="checkbox" name="toppings" value="pepperoni">
                    Pepperoni
                </label>
            </div>
        </div>
        <div class="field">
            <div class="control">
                <label class="checkbox">
                    <input type="checkbox" name="toppings" value="mushrooms">
                    Mushrooms
                </label>
            </div>
        </div>
        <div class="field">
            <div class="control">
                <label class="checkbox">
                    <input type="checkbox" name="toppings" value="olives">
                    Olives
                </label>
            </div>
        </div>
    </fieldset>
</form>

Usage

Wrap the individual checkboxes with the .checkbox class for spacing.

Use checkboxes to select either on/off toggles or multiple selections.

With checkboxes make it clear with words when users can select one or multiple options.

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.