Searchable Select
Searchable Select allows users to select one or multiple items from a list of options. It provides a search input field to filter the options.
The label attribute provides a short description of the purpose of the Searchable Select.
If a visible label can't be used, provide one using the aria-label
The helper-text attribute provides additional information about the purpose of the Searchable Select.
To add HTML to the helper text, use the helper-text slot.
The placeholder attribute provides some text to be displayed when no option has been selected.
Avoid using placeholder text as a substitute for a label. Placeholder text is not a reliable label—it disappears when users type and is not always announced by screen readers. Use a label element to ensure the Combobox is both visually and programmatically associated with a descriptive label.
You can add the Contextual Help component using the contextual-help slot. It will be displayed next to the label, providing users additional information.
The error-text attribute provides a custom error message. Any current error state will be overridden by error-text.
The success-text attribute provides a custom success message. Any current error state will be overridden by success-text.
The icon attribute can set to display an icon from the icon library on the component.
The preferred way to add icons is to use the icon slot.
The icon prop is deprecated (as of 05/25) and directly replaced with icon slot. icon is still functional in the component but will be removed in a future major release. This will be communicated when it's removal becomes a release candidate at the end of the support period.
The shape attribute controls the border radius of the Searchable Select input element.
The appearance attribute controls the style of the select element.
Use ghost in combination with a containing element which provides a border, for example when used inside the leading action items slot of Text Field.
The scale attribute controls the display size of the Searchable Select.
The multiple attribute allows the user to select more than one option.
This controls the maximum number of lines of tags to display. When the limit would be exceeded, the remaining tags will be hidden and replaced by a counter instead.
This controls the maximum number of items that user can select. Once the limit is reached, the remaining options will be disabled.
When set, the selected tags will not be displayed inside the component.
The tag-connotation of Option attribute sets the connotation of the tags.
Use the enable-select-all attribute to add Select All option at the top of the list.
Do not use enable-select-all together with max-selected. When max-selected is set to a positive number, the “Select All” option is hidden.
Adds a clear button to the input field, which clears the selected value(s) when clicked.
The disabled attribute disables the Searchable Select.
The loading attribute shows the component in a loading state.
If there are no options to display, the component shows a loading message. It can be customized using the loading-options slot.
See the asynchronous option loading use-case for an example of how to load options.
The no-options slot allows you to customize the message when there are no options to choose from.
The no-matches slot allows you to customize the message that appears when no options match the search query.