Select
Features
- Supports multiple selection.
- Supports grouped options.
- Supports options with icons, avatars and descriptions.
Examples
Multi select
The select supports multiple selection. This can be enabled by passing the isMulti flag.
With prefix icon
A prefix icon can be supplied to provide a visual cue about the type of options available. The prefix icon will be displayed when no option is selected, or if the available options do not have icons of their own.
Grouped options
Options can be separated into distinct groups (sections) with a label for each group. This is useful if you have options that belong to different categories.
Disabled options
Options can be disabled to prevent users from selecting them. This should be used when the option is not applicable in the current context. If an item is never applicable, it should not be included in the list of options.
Option icons
Use option icons to provide visual cues about the type of options available. A common use case if for expense categories where icons can be used to quickly identify the type of expense.
Option descriptions
Use option descriptions to provide additional helpful details about the options available and/or in cases where the label alone may not be enough for users to distinguish between options.
Option avatars
We support avatars as a way to quickly identify items. By incorporating both a visual cue (e.g. the user's profile picture, or company logo) and textual information (the item label), this variation facilitates a quick and accurate selection of items from a list, enhancing user experience.
Enlarged avatars
Avatars can be enlarged for enhanced visibility. These are meant to be used in combination with a description to provide additional details such as a user's role or department in situations where such information is useful or necessary for distinguishing between options.
Error handling
The component has built-in support for error handling. This is done by passing an isInvalid flag and a renderError method that allow you to render an error component.
We recommend using the FormControl component for handling errors. It provides a consistent way of handling errors across all form components.
Required
Show value on hover
In cases where you many selects and want users to have quick access to the selected value, it can be useful to show the selected value when hovering over the select. This can be done by passing the showValueOnHover flag. The value after hovering the Select for a few seconds.
You can find more details on why we added this feature here.
Related components
- Checkbox: Checkboxes are most commonly used when there are multiple items to select in a list. Users can select zero, one, or any number of items.
- Form control: Form control displays a labelled input and, optionally, associated validation text and/or hint text.
- Input: An element used to create interactive controls for web-based forms in order to accept data from the user.
- Radio group: A form element that allow users to select an single option from a list of at least two options.