Overview

A checkbox is form input control that lets users select one or more options from a list.

Checkbox

Each checkbox can be checked or unchecked.

<!-- Start of checkbox control block -->

<div class="qld__control-input qld__control-input--block">

    <!-- Single checkbox with associated label -->
    <input class="qld__control-input__input" type="checkbox" name="checkbox-simple" id="Simple">
    <label class="qld__control-input__text" for="Simple">Simple checkbox design</label>

</div> 

<!-- Start of fieldset -->

<fieldset class="qld__fieldset" aria-describedby="checkbox-example-hint">

    <!-- Legend for the fieldset with abbr tag for "required" -->
    <legend class="qld__fieldset__legend">
        <abbr title="required">*</abbr>Checkbox list
        <span class="qld__label--optional">(Optional)</span> 
    </legend>

    <!-- Hint text for the fieldset -->
    <div class="qld__hint-text" id="checkbox-example-hint">Select all that apply</div>

    <!-- Start of form group -->
    <div class="qld__control-group">

        <!-- Checkbox 1 with associated label -->
        <div class="qld__control-input qld__control-input--block">
            <input class="qld__control-input__input" type="checkbox" name="checkbox1" id="Phone">
            <label class="qld__control-input__text" for="Phone">Phone</label>
        </div>

        <!-- Checkbox 2 with associated label -->
        <div class="qld__control-input qld__control-input--block">
            <input class="qld__control-input__input" type="checkbox" name="checkbox2" id="Email">
            <label class="qld__control-input__text" for="Email">Email</label>
        </div>

        <!-- Checkbox 3 with associated label -->
        <div class="qld__control-input qld__control-input--block">
            <input class="qld__control-input__input" type="checkbox" name="checkbox3" id="Mail">
            <label class="qld__control-input__text" for="Mail">Mail</label>
        </div>

    </div> 

</fieldset>

<!-- Start of fieldset -->

<!-- This set checkboxes uses the modifying class 'qld__control-input--small' to reduce the size of the checkboxes -->

<fieldset class="qld__fieldset" aria-describedby="checkbox-example-hint">

    <!-- Legend for the fieldset with abbr tag for "required" -->
    <legend class="qld__fieldset__legend">
        <abbr title="required">*</abbr>Checkbox list
        <span class="qld__label--optional">(Optional)</span> 
    </legend>

    <!-- Hint text for the fieldset -->
    <div class="qld__hint-text" id="checkbox-example-hint">Select all that apply</div>

    <!-- Start of form group -->
    <div class="qld__control-group qld__margin-t-p" >

        <!-- Checkbox 1 with associated label -->
        <div class="qld__control-input  qld__control-input--small qld__control-input--block">
            <input class="qld__control-input__input" type="checkbox" name="checkbox1-sm" id="Phone-sm">
            <label class="qld__control-input__text" for="Phone-sm">Phone</label>
        </div>

        <!-- Checkbox 2 with associated label -->
        <div class="qld__control-input  qld__control-input--small qld__control-input--block">
            <input class="qld__control-input__input" type="checkbox" name="checkbox2-sm" id="Email-sm">
            <label class="qld__control-input__text" for="Email-sm">Email</label>
        </div>

        <!-- Checkbox 3 with associated label -->
        <div class="qld__control-input qld__control-input--small qld__control-input--block">
            <input class="qld__control-input__input" type="checkbox" name="checkbox3-sm" id="Mail-sm">
            <label class="qld__control-input__text" for="Mail-sm">Mail</label>
        </div>

    </div> 

</fieldset>

Valid and invalid states

Add a border around the control inputs to indicate valid or invalid selections.

Disabled control inputs

Disabled control inputs can be used to indicate inputs that are no longer valid or have expired.

Vanilla example

Palette

Default
Light
Alt
Dark
Dark-alt

Checkbox disabled

Select all that apply

Phone

Email

Mail

<!-- Start of fieldset -->
<fieldset class="qld__fieldset" aria-describedby="checkbox-disabled-example-hint">

    <!-- Legend for the fieldset -->
    <legend class="qld__fieldset__legend">Checkbox disabled</legend>

    <!-- Hint text for the fieldset -->
    <div class="qld__hint-text" id="checkbox-disabled-example-hint">Select all that apply</div>

    <!-- Start of control group -->
    <div class="qld__control-group">

        <!-- Disabled checkbox 1 with associated label -->
        <div class="qld__control-input qld__control-input--block">
            <input class="qld__control-input__input" type="checkbox" name="checkbox7" id="Phone" disabled>
            <label class="qld__control-input__text" for="checkbox7">Phone</label>
        </div>

        <!-- Disabled checkbox 2 with associated label -->
        <div class="qld__control-input qld__control-input--block">
            <input class="qld__control-input__input" type="checkbox" name="checkbox8" id="Email" disabled>
            <label class="qld__control-input__text" for="checkbox8">Email</label>
        </div>

        <!-- Disabled checkbox 3 with associated label -->
        <div class="qld__control-input qld__control-input--block">
            <input class="qld__control-input__input" type="checkbox" name="checkbox9" id="Mail" disabled>
            <label class="qld__control-input__text" for="checkbox9">Mail</label>
        </div>

    </div> 

</fieldset>

Usage guidelines

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 it

Don't use the checkboxes component if users can only choose one option from a selection. In this case, use the radio button.

How to use it

When you see a radio button, you can only pick one choice. But when you see a checkbox, you can pick more than one choice. Don't think that people will know how many choices they can pick just by looking at the buttons. To help people, you can add a hint message that says "Select all that apply".

Do

put the choices in alphabetical order.
group checkboxes together in a <fieldset> with a <legend> that describes them, as shown in the examples on this page. This is usually a question, like ‘How would you like to be contacted?’ (GOV.UK, n.d.).
use hints to to provide help that's relevant to the majority of users (Agriculture Design System, 2023).

Dont

provide disabled options unless unavoidable
choose an answer for people by ticking the checkbox beforehand. This can confuse them and they might pick the wrong answer or forget to answer the question.
use a horizontal list of options unless unavoidable.
use long paragraphs and lists in hint text, this can frustrate users who use screen readers (Agriculture Design System, 2023).

Smaller checkboxes

In most cases, standard-sized checkboxes are preferred, but on pages like search results, where the primary user need is to view results, smaller checkboxes can be employed to allow users to see and modify search filters without diverting their attention from the main content (GOV.UK, n.d.).

More guidance

For more detailed guidelines on how to structure and lay out checkboxes see Australian style manual.

Last updated: April 2026

Back to top