[component]

Dev Mode
Select field
Description
Displays a list of options. Uses a custom dropdown with optional search on web and native (centered modal on Android).
Open the dropdown to use the search filter when disableSearch is false.
Select field
With Title
With Helper Text
With Error Text
Disabled
Disable search
Usage Guidelines
Do
Present users with a list of options.
Allow users to choose one option.
Don't
When more than 10 options are needed, consider using another component instead.
If two or more choices are allowed, use the checkbox field.
If fewer than 4 choices are needed, consider using a Radio field instead.
Accessibility
The list should be labeled so that screen readers know that the list is related.
Status
Documentation:
Figma:
Web:
iOS:
Android:
Related
Checkbox, Radio field
Examples
Select Field Examples
Standard - No title, errorText, or helperText
With title
Select field
With helperText
Select field
This is some helper text
Disabled — long label wrapping test
Select field (disabled, short label)
Searchable
Searchable
Yes
Pick a fruit
Type in the field to filter options as you open the menu.
Many options (150)
150 options — open the menu to verify scrolling and search filtering.
Pick one of 150 options
Opens a centered modal on Android with search and scroll-to-selected.
Disabled — long label wrapping test
Select field (disabled, long label)
Many options (150)
150 options — open the menu to verify scrolling and search filtering.
Pick one of 150 options
Opens a centered modal on Android with search and scroll-to-selected.
Searchable dropdown
Searchable
Yes
Pick a fruit
Type in the field to filter options as you open the menu.