Select

Used to choose a single option from a list of choices.

Select replaces the existing Select (Old), which is deprecated. While Select is available, continue using the deprecated Select (Old) component until notified otherwise, in accordance with the Pausing selected form components rollout guidance.

Stable

Show details

Anatomy

Anatomy summary lists and describes all the elements within a component (including nested components).

Element	Description	Optional?
1. Field label	Mandatory textual label used to describe the form field to guide users in filling it.	No
2. Required or optional marker	Textual label used to denote if a field is required or optional. Marker’s copy is not changeable.	Yes
3. Popover trigger	Icon used to signify a popover trigger in the context of forms, where helper text is not sufficient or suitable to provide additional information.	Yes
4. Helper text	Additional description helping users provide the right input, if the field label is insufficient.	Yes
5. Field	Select field that allows users to select a single option out of several options.	No
6. Suffix	Icon signifying whether Select is open or closed.	No
7. Clear button	Button clearing the selected option. Only available when there’s an option selected.	Yes
8. Search field	Search input that allows finding an option within the option list.	Yes
9. Option	Singular selectable option that can contain text and additional Avatar or icon.	No
10. Popover	Scrollable select dropdown that can be pre-filled with multiple textual options.	No
11. Option description	Textual description that helps provide more context or secondary information to an option.	Yes
12. Option prefix	Avatar or an icon that can be added to an option to signify specific, unique items (e.g.: Spaces, users).	Yes
13. Form validation	Icon and text used when validating user form input to provide advice on fixing input errors and confirmation when they are addressed.	Yes

Variants

Variants contain different versions of the component depending on specific properties, such as state, size, colour, optional iconography, etc.

Select

Property	Values	Default
state Variant	rest \| focus \| read-only \| disabled	rest
validation Variant	neutral \| error	neutral
hasSelection Variant	false \| true	false
isPopoverOpen Variant	false \| true	false

Select

state read-only validation neutral hasSelection false isPopoverOpen false

Select

state disabled validation neutral hasSelection false isPopoverOpen false

Select

state focus validation neutral hasSelection false isPopoverOpen false

Select

state rest validation error hasSelection false isPopoverOpen false

Select

state rest validation neutral hasSelection false isPopoverOpen false

Select

state rest validation neutral hasSelection true isPopoverOpen false

Select

state rest validation neutral hasSelection false isPopoverOpen true

Component dependencies

This component is internally dependent on the following form sub-components:

Figma	Code
formElement.labelGroup	Legend
formElement.input	N/A
formElement.select.optionList	Combination of SelectDropdown, SearchInput and Listbox
formElement.select.option	SelectOption
formElement.validation	InputError

Figma sub-components

formElement.labelGroup

formElement.select.optionList

type select state has results

formElement.select.optionList

type select state batch loading

formElement.select.optionList

type select state error

It’s also dependent on:

System Icons

Our icon library with guidelines on using and adding icons

Button

Buttons allow users to take actions that will trigger a response.

Popover Basic

Popover is a temporary overlay window that contains contextual information

Search Input

Search Input allows users to perform in-page content searches

Help and support

Ask a question or submit a request

Find us in #team-frontend-foundations-requests Slack channel

Select

Anatomy

Variants

Component dependencies

Figma sub-components

Help and support

Design Resources

Engineering Resources

Slack Channels