Select
A select displays a collapsible list of options and allows a user to select one of them.
Installation
CLI
Manual
Examples
Section
A select component can display items grouped together in sections.
select-section-example
Searchable select
Sometimes, you may need to search for an item in a select component. Here's how you can do it.
select-searchable-example
With icon
select-with-icon-example
With avatar
select-with-avatar-example
Multiple select
Enable selecting more than one option by setting selectionMode to multiple.
select-multiple-example
Excited and Adventurous
Validation
If a user submits the form without selecting an item, an error message will appear.
select-validation-example
Details description
If you need to provide more information about an option, use the Description component to display additional details.
select-details-description-example
Choose the appropriate role based on the level of access required.
Choose the appropriate role based on the level of access required.
Controlled
You can control the select component by passing the selectedKey prop.
select-controlled-example
You have selected:
Uncontrolled
You can uncontrolled the select component by passing the defaultSelectedKey prop.
select-uncontrolled-example
Disabled
When the select component is disabled, it cannot be interacted with.
select-disabled-example