Components - Select

Contents

What is a Select?

A Select opens a list of options under the input field (in an overlay) that a user can select from within a form. The selected option is shown in the input field when overlay is no longer open and not the focus of the user.

Top left select default, top centre select focussed, top right select disabled. second row left select read only, middle select valid, bottom right select invalid.

When, and why?

You should use a Select when you need a user to select one or more options from a large group of data. Using a Select allows the user to search and filter through the given list.

Selects are similar to Dropdowns. Dropdowns however should never be used as part of a form.

Select types

The following Select types are available:

Types

Type	Description
As default	A Select which allows a user to choose an item from a list of options
As multi-select	A Select which allows a user to choose one or more items from a list of options

Select properties

The following Select properties are available:

Property	Description
State	Sets the state of a nav button; Default, Hover, or Active*
Size	Sets the size of the Select; S and M (default)
Collapsed	Toggles between the collapsed and expanded versions
Selections	Allows up to 4 selections to be shown
Label	Shows/hides the input label
Mandatory	Shows/hides the mandatory input markers
Help	Shows/hides the help text

Using a select

Minimum required options

A Select should only be used if there are six or more options to choose from. If the user has fewer options to choose from, then you can use Radio buttons instead, or Checkboxes for answers that require multiple answers.

on the left the select default with the text do use the select if there are more than six options available. On the right the radio button component with the text don't use the select if there are six or less options available

Select sizing

The field width should be the same as the widest option that the user will be able to pick from. See field affordance for more information

Multi-select

The Multi-select type allows your users to select one or more items from a list. While the selections are displayed, the drop-down menu will remain open after each selection so the user can select as many as the want - it can then be closed by selecting the icon or selecting outside the menu itself.

When a user uses the drop-down list to select an item, it is shown as a Chip in the input section to indicate that it has been selected. Users can then select a cross icon on the Chip to remove the selection. When multiple options are selected, the input will not get wider - instead, the Chips will wrap onto multiple lines.

You can also use a filter to help the user find what they they're looking for by using the Filter input.

Option groups

If the options in your Select menu have a hierarchy or categorisation, you should split them into groups (using headings). This allows users to find the option quickly by scanning the group labels instead of every single option. These groups should be logical (for the user) and have meaningful names.

All headings should follow the guidelines outline in Content.

References

https://www.nngroup.com/articles/drop-down-menus/ https://www.nngroup.com/articles/listbox-dropdown/

For additional examples and API documentation, see Storybook

Live demo

Below, you can find a live demo for a Select component. Use the drop-down menus and radio buttons to view the different Select Types and Variants.

Select input

Select input help text

This is some invalid text

Contents

Component accessibility

This component has been built to meet the current WCAG AA 2.1 guidelines. We also test these components against the guidelines before release.

Aria tags

Every component in Mosaic requires an appropriate Aria tag to ensure that screen readers can effectively parse the page. Aria tags are provided as part of Mosaic. Please do not override these without good reason.

Ensure that Aria tags are used as appropriate signposts throughout the product.

Colour Combinations

When designing with a Select, you should be mindful of the colour combinations you are using. The components have been designed with this in mind, but if you are using colours that are not part of the default component, please ensure that there is a clear colour contrast within the parts of the component and between the Select and the background it is on. To check the contrast, please use WebAIM's contrast checker.

Focus state

A Select needs to have a focus state - a focus state is when you tab into an element to interact with it. Ensure that users can use their keyboard to focus on the Select and the elements within it.

Icons

An icon needs to have underlying code that describes what action the icon takes. the labels should be specific - for example, a 'bin' icon for delete should be labelled 'delete' not 'bin'.

Key Binding

An Select needs to be able to be interacted with via a keyboard. Where possible we will provide key-binds within our Mosaic component or there will be default HTML ones. If this isn't the case then please implement logical key-binds for all intractable components.

Movement/Animation

Please refer to the WCAG guidelines for the time-based considerations for animations.

Design	Documentation	HTML/CSS	Web Component

Select