Select
Select lets users choose one option from an options menu. Consider using select when you have 4 or more options to choose from.
The label attribute provides a short description of the purpose of the 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 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.
To provide a selected option, use the selected attribute on the selected Option.
Use the label attribute on the Option component to proviode a different label to be displayed when the option is selected.
In the example below, the state code is displayed when selected but the full state name is displayed in the option list.
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 scale attribute controls the select element display size.
Use condensed in situations when space is limited, for example, inside a Data Grid cell.
The reason for using scale for form elements and not size (as used in other components such as Button), is that size is a HTML attribute that can be used on input elements (and also Text Field) to control the width of the input.
The shape attribute controls the border radius of the 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 multiple attribute allows the user to select more than one option. When in the multiple selection state, the options will always be visible.
For a better user experience, consider using a Checkbox list or the Searchable Select if there are many options to pick from.
The clearable attribute adds a clear button, which clears the selected value(s) when clicked.
The disabled attribute disables the select element.