Select

To let users select a single item from a list, use a single select list.

A select list may use other properties for additional customization. Select each checkbox in the example below to visualize the following behavior:

• To prevent a toggle click from opening a select list, use the isDisabled property.
• To adjust the direction a select menu opens, use the direction property. The menu in the following example expands upwards. By default, select lists open upwards.
• To add an icon to a select toggle, use the toggleIcon property.

To give more context to a <SelectOption> in a list, use the description property.

To group related select options together, use 1 or more <SelectGroup> components and title each group using the label property.

To allow users to favorite items in a select list, use the onFavorite callback. When users click the favorite button, the item is duplicated and placed in a separated group at the top of the menu. To change the name of the group use the favoritesLabel property.

To validate selections that users make, pass a validation state to the validated property. Validating selections can let users know if the selections they make would cause issues or errors.

The example below passes an "error" state when you choose “select a title”, a "warning" state when you choose "other", and a "success" state for any other item selected from the menu.

To add a toggle label to a select, use the placeholderText property. The following example displays "Filter by status" in the toggle before a selection is made.

To fade the color of placeholderText to gray, use the hasPlaceholderStyle property.

To set a <SelectOption> as a placeholder, use the isPlaceholder property. The following example sets the "Filter by status" as a placeholder so that it is pre-selected.

You can add a footer to a <Select> list to hold actions that users can take on menu items.

To reduce the processing load for long select lists, replace overflow items with a "View more" link at the bottom of the select menu.

Adjust the number of items shown above the "View more" link with the numOptions property. The following example passes 3 items into this property.

To let users select multiple list options via checkbox input, use a checkbox select. To create a checkbox select, pass variant={SelectVariant.checkbox} into the <Select> component.

By default, a badge is displayed in the menu toggle that indicates the number of items a user has selected.

You can use groups alongside checkbox input. The item count badge will display the number of items selected across all groups.

To change the default badge text for a checkbox select, use the customBadgeText property. The following example uses customBadgeText to display "all" in the badge once all menu items are selected.

To remove the default item count badge, use the isCheckboxSelectionBadgeHidden property.

To show users the number of items that a <SelectOption> would match, use the itemCount property. The numerical value you pass into itemCount is displayed to the right of each menu item.

You can combine a footer with checkbox input to allow users to apply an action to multiple items.

When a "view more" link is used alongside checkbox input, selections that users make prior to clicking "view more" are persisted after the click.

To preload a filter search bar with placeholder text, use the inlineFilterPlaceholderText property. The following example preloads the search bar with "Filter by status".

To allow users to filter select lists using text input, use the hasInlineFilter property. Filtering behavior can be further customized with other properties, as shown in the example below. Select each checkbox to visualize the following behavior:

• To persist filter results on blur, use the isInputValuePersisted property.
• To persist a filter that a user has searched, use the isInputFilterPersisted property.
• To allow users to add new items to a select list, use the isCreatable property. When this property is applied and a user searches for an option that doesn't exist, they will be prompted to "create" the item.

Typeahead is a select variant that replaces the typical button toggle for opening the select menu with a text input and button toggle combo. As a user types in the text input, the select menu will provide suggestions by filtering the select options.

To make a typeahead, pass variant=typeahead into the <Select> component. To specify a label for the input field, use the typeAheadAriaLabel property.

A few additional customization options are shown in the example below. Select each checkbox to visualize the following behavior:

• To place a created item at the top of a typeahead list use the isCreateOptionOnTop property.
• To trigger a callback for newly created items, use the onCreateOption property.
• To reset the typeahead value after a user makes a selection, use the shouldResetOnSelect property.

Typeahead matches items with user input across groups.

You can add custom filtering to a select list to better fit needs that aren't covered by inline filtering. If you use custom filtering, use the onFilter property to trigger a callback with your custom filter implementation.

To create a multiple typeahead select variant, pass variant={SelectVariant.typeaheadMulti} into the <Select> component. Multiple typeaheads let users select multiple items from a select list. Selected items appear as chips in the select toggle.

When many items are selected, you can hide overflowing items under a "more" button. The following example hides items after more than 3 are selected. To show hidden items, select the “more” button. Click "show less" to hide extra items again.

To customize the appearance of chips, use the chipGroupProps property. The numChips property allows you to control the number of items shown, while the expandedText and collapsedText properties allow you to control the labels of the expansion and collapse chips.

To customize chips even more, render a <ChipGroup> component and pass it into the chipGroupComponent property of the <Select> component.

A <SelectOption> can have an object passed into the value property in order to store additional data beyond just a string value. The object passed in must have a toString function that returns a string to display in the SelectMenu.

To plainly style a typeahead, use the isPlain property.

To add custom menu content, use the customContent property.

Avoid passing in document.body to the menuAppendTo property. Doing so can cause accessibility issues because this prevents users from being able to enter the contents of the select options via assistive technologies (like keyboards or screen readers). Instead, pass in parent to achieve the same result without sacrificing accessibility.

The following example demonstrates both methods. When the dropdown is opened, both select variants manage focus the same way, but behave differently when the tab key is pressed after an option is selected.

• For the document.body variant, the focus will be placed at the end of the page, since that is where the dropdown content is appended to in the DOM (rather than focus being placed on the second Select variant as one might expect).
• For the parent variant, however, the focus will be placed on the next tab-able element (the "Toggle JS code" button for the code editor in this case).