Checkbox

Checkboxes are input that allow users to select multiple options from a group of related items.

Key Points

• Use checkboxes to allow users to select multiple options from a list or toggle a single option on or off
• Use this input type along with other form guidelines
• Use radio buttons if you want to limit users to select only one option from a list

Usage

• Checkboxes are contained in a fieldset with a legend as a title
• Each fieldset should have at least two or more checkboxes for the user to select
• Order checkboxes alphabetically
• Use helper text to support user's choices
• Use aria-describedby to provide descriptive labels (e.g. helper text)

Checkbox orientation (vertically stacked)

                                                        
                                                        
                                                            <fieldset aria-describedby="helper-text">
                                                          <legend>Will you be travelling to any of these countries</legend>
                                                        
                                                          <!-- Helper text -->
                                                          <p id="helper-text">Select all countries that apply</p>
                                                        
                                                          <div>
                                                            <input id="country-france" name="country-france" type="checkbox" value="France">
                                                            <label for="country-france">France</label>
                                                          </div>
                                                        
                                                          ...
                                                        </fieldset>
                                                        
                                                            

Behaviour

Pre-selecting the Checkbox

Avoid pre-selecting the checkbox. Users might submit the wrong answer or not realise they’ve missed a question.

Size and Contact Area

Establish interaction by selecting the checkbox, label or the surrounding contact area.

Checkbox's size & interactive area

Validation

Checkbox's validation

Replace the value of aria-describedby from the fieldset to match the id of the error element. This will help screen readers understand what is happening on the form when an error occurs.

                                                        
                                                        
                                                            <fieldset aria-describedby="error-msg">
                                                          <legend>Will you be travelling to any of these countries</legend>
                                                        
                                                          <!-- Helper text -->  
                                                          <p id="helper-text">Select all countries that apply</p>
                                                        
                                                          <!-- Error message -->
                                                          <p id="error-msg">Select a country</p>
                                                        
                                                          <div>
                                                            <input id="country-france" name="country-france" type="checkbox" value="France">
                                                            <label for="country-france">France</label>
                                                          </div>
                                                        
                                                          ...
                                                        </fieldset>
                                                        
                                                            

Keyboard

Checkboxes should:

• Get a focus interaction and navigatable using the 'tab' ⇥ key
• Be selected by using the 'space' ␣ key