Selector functionality

Button select

The Button select variation, or 'Select and go' functionality is used to direct the user to a new destination or to present them with something new (eg a new question). The hover state includes a micro-interaction of the chevron, as well as an increase in border thickness.

Single select

The single-select variation mimics the functionality of radio buttons, allowing only one Griditem from the set to be selected. When an Griditem is selected, the border increases in thickness with a tick icon used for further aid in visual confirmation.

Multi-select

The multi-select variation mimics the functionality of checkboxes, allowing multiple Griditems from the set to be selected. When an Griditem is selected, the border increases in thickness with a tick icon used for further aid in visual confirmation.

Selector design

Any of the variations described above can come in either a simple or complex layouts depending on the content required to be displayed.

Simple layout

The minimum content requirement is a label.

Complex layout

Some experiences may require more detail such as monetary values or product names. This can be accommodated using hint text or a secondary label. Icons and pictograms can also be used to help convey meaning. They are defaulted to 24px however can be made larger or smaller.

Any combination of these elements may be used as long as they are used consistently throughout a set, and should always at least have a label.

User experience

The Selector is a component for helping users make a choice about a product, usually at the acquisition stage, or at the service end as the large container helps distinguish it from a form control (despite it being a big radio or checkbox!).

In order to be accessible, radios and checkboxes need a fieldset legend—essentially a descriptive label above the choices that gives context to the options presented which is also beneficial from a usability standpoint.

As the Selector can be used as a radio or checkbox, we strongly recommend making that distinction in the label. Eg, “Select one account below” or “Select all accounts below that apply”.

Note, the label is not part of the Selector and will have to be designed and integrated.

When using hint text, bear in mind how much copy you use as this impacts the way the selector appears on mobile. Hint text should aid in the decision or provide greater context rather than tell a story.

Visual design

The selector border radius needs to be accessible and so uses the Border Dark colour which meets WCAG’s contrast ratio requirements. When selected, the border thickens to 3px as well as taking on the Hero colour to make it clear it has been selected.

The labels inside and hint text follow the established sizing and weight conventions we use in all our form controls.

While icons and pictograms can be used, be careful not to rely on them to convey the primary meaning of the content. They are available to be used as a supplementary visual cue. Be aware with pictograms that at small sizes they lose some of their detail and in turn their effectiveness as a communication device.

When the selector is used with the chevron, on desktop devices it will produce a micro-interaction on hover by shifting 10px to the right. This helps inform users that when selected, they will navigate to another page or screen, matching the established convention in all Westpac Group brands.