Skip to content
Copyright © 2024 by Westpac Banking Corporation. All rights reserved.

Checkboxes are a proven and effective way to elicit a multiple choice from a user. They also require careful consideration to produce the best results.


There are two checkbox sizes, make sure when laying out forms that your checkbox size and field sizes are aligned.

Hint text

This variation allows supporting text to be displayed below the selectable item. For use in scenarios where the options are complex and require further information for clarity, using the hint text prevents the labels becoming too long which can effect scanability. Hint text can be used with both Medium and Large sized checkboxes.


When requirements dictate long lists of choices, and particularly as mobile screens can only show a limited amount of information at a time, it's possible to surface the most common choices, and hide the rest under a "reveal" interaction. Once the user selects the toggle, the remaining items reveal and the toggle disappears.

  • Avoid hiding one or two options under the toggle as this forces the user to interact with the interface for very little value.
  • Use data to inform your decisions on which options are surfaced at the screen level.
  • Surface the most popular and hide the rest behind the interaction.
  • Always express how many items are behind the reveal.
  • Reveal can be used with both Medium and Large sized checkboxes.

Horizontal layout

Use this option when you require an inline layout, it's only recommended in very specific circumstances and we suggest never having more than two checkboxes side-by-side.

Error state

All form elements have associated error states, see Error messages in our content guidelines for more.

User experience

If you are asking your user to select one or more options from a list, then Checkboxes are the way to go. A single checkbox can also be used in isolation usually to acknowledge consent, understanding or agreement e.g Terms and conditions.

Keep elements close to each other for maximum performance as illustrated below:

Illustration showing three different ways to relate checkbox inputs to labels. Unrelated shows the checkbox spaced far away from the label. Forced shows the same spacing as unrelated but with a line connecting them. Related shows the label very close to the checkbox.

The closer the label to the input, the better.


There is little association between the input (checkbox) and label 'Select'.


Using the Gestalt principle of continuity, by adding a line between the input and the label, we are guiding the eye along the line and connecting the two.

When a label sits next to an input the association is strongest.

Visual design

Most operating systems provide default styling for common UI elements such as checkbox groups. We've overridden this default styling for several reasons:

  1. The default styling does not align with our brands look and feel.
  2. The default styling often fails accessibility requirements such as colour contrast ratio and hit area.
  3. The default styling is proportionately not aligned with the other UI elements.

These issues have been addressed with the styling of the checkbox groups while making them more accessible, more consistent, more tactile and more visually appealing. These overrides also ensure that the radio and checkbox components will adapt automatically when building multi-brand applications.

Dos and don’ts

  • Avoid placing more than two radios or checkboxes horizontally, side-by-side.
  • Don't mix checkboxes and radios
  • Avoid changing the colour of the checkbox symbol.
  • Avoid changing the text styling of the checkbox label (size, colour etc).
  • Do make sure the taxonomy of the options you are offering makes sense as any ambiguity will only slow down or confuse the user.
Question set asking ‘Which methods do you use to get to work?’ With checkbox options: Car, Bicycle, Train, Other means. This diagram has a tick.
Question set asking ‘Which methods do you use to get to work?’ With checkbox options: Car, Bicycle, Train. Last item Other means as radio button. This diagram has a cross.
Question set asking ‘Do you have any of the following in your household?’ With checkbox options: Cameras, Bicycles, Audio equipment, Computer equipment. This diagram has a tick.
Question set asking ‘Do you have any of the following in your household?’ With checkbox options: Cameras such as professional cameras, consumer cameras, digital cameras, film cameras, video cameras; Bicycles (whether it’s yours or someone else’s in the same household); Audio equipment including CB radios; Computer equipment including smartphones, desktops, tablets, laptops, game consoles. This diagram has a cross.

Where is this available?

The GEL design System will always have the latest component versions and additions, however new components and changes to existing components may roll out to other platforms at different times.