Select

View in Storybook

Anatomy

Select has the ability to display various types of selectable items within the product, and also label the type of items that can be selected.

1. Label (optional): A title for a Select to describe its purpose.
2. Avatar(optional): Displays selected product member.
3. iconLeft (optional): Visual aide for the input’s content.
4. Text: Displays the selection. Show a placeholder option only if there’s no logical default option.
5. iconRight: Indicates options are available to select within a DropdownMenu.
6. Prefix (optional): Used to guide what type of options can be selected.
7. helpMessage (optional): When a label is not required, longer helpful text can be added.

Sizes

By default, a Select input will be as wide as the text of it's longest option. You can render a select input to fill the width of it's parent element.

States

Focused

Upon clicking a Select, the onFocus state is displayed by default with the placeholder text remaining.

Selected

This informs a user that an option has either been selected or pre-selected in a previous interaction.

Error

A Select can be marked as having an error to show that a value that was entered is invalid. Avoid errors here by removing or disabling invalid options from the list of options.

Disabled

Communicates to the user that an input exists, but is not available to be interacted with or changed.

ReadOnly

The option in a read-only Select cannot be modified. However, a user can tab to it, highlight it, and copy the text from it.

Loading

When making a selection(s), a loading indicator appears alongside the text displayed. During this time the Select becomes disabled.

Properties

Select offers further props for customisation when necessary within the product UI.

	helpMessage   A single validation message may be displayed to provide helpful information for a user to complete their task. These message can wrap onto a second line if the width of the Select is shorter.

	Prefix   This gives a user further prepended context as to the type of information a particular Select requires and removes any additional text entry. These should be no longer than 2 words long.

	Hidden label   It may sometimes be necessary to hide labels, but label text must still be made available for screen readers. Placeholder text should be made visible in these instances for users to understand the type content that can be selected.

	Muted   By default, Select has a border to help separate them for other aligned components. Alternatively, muted Select have no visible border when we want to add separation from a string of SelectGroup components.

Usage

	Contextual widths   The minimum width for a Select is 2 characters long. This guarantees that our default Select variant are readable and easy to use on touch devices.

Text overflow

When the field label and menu text are too long for the available horizontal space, they wrap to form another line. The field text itself truncates at the end, but the text can be shown in full in the menu.

Pre-selected

When previously altered, we set a pre-selected option on the Select. When specified, the option continues to be displayed in the Select upon page load.

Accessibility

• Select placeholders cannot be used in place of labels and should be used sparingly. They also should not convey critical information.
• Select options should not be prefixed with emoji, as that disrupts typeahead behaviour.

Best practice

• Use a select input for longer lists of options. For 4 options or fewer and vertical space is available, use a group of Radio or multi-selectable Checkbox items
• Have a default option selected whenever possible
• Use “Select” as a placeholder option only if there’s no logical default option
• Order the menu options in a logical order to make it easier for users to find the option they're looking for. Default to alphabetical order when this is appropriate.

Do's and Don'ts

Also see

• SelectChip
• DropdownMenu
• Forms