Displays a list of options using the browser’s native select and includes a custom option that renders a text field when selected and allows user to input value not included in predefined options.
Custom Select Field Title
Helper text goes here
Title
Helper Text
Error Text
Disabled
Usage Guidelines
Do
Present users with a list of options.
Allow users to choose one provided option or enter a custom 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.
Accessibility
The list should be labeled so that screen readers know that the list is related.
Props
Name
Type
Required
Description
onChange
Required
The function to call when the custom select field value changes.
options
Required
The options available for selection in the select field.
Each option should have a label and a value.
value
Required
The current value of the custom select field.
disabled
boolean
If true, the select field will be disabled.
disableSearch
boolean
When true, hides the type-to-filter search UI. Search is enabled by default.
errorText
string
The error text to display if there is an error.
helperText
string
The helper text to display below the select field.
placeholder
string
The placeholder text to display when no option is selected.
testID
string
Root test id for the primary interactive element or container.