Select
Select allows a user to pick single or multiple options from a list. This component is a wrapper of react-select.
Basic
Basic Usage.
Please Select
Size
There's three sizes of option for Select.
Please Select
Please Select
Please Select
Multi Selection
By setting
isMulti to true, we can select multiple options from the list.Purple
Red
Disabled
Example of disabled.
Certain options disabled
Purple
Purple
Red
Disabled Search
Select is searchable by default, but we can also turn it off by setting
isSearchable to false.Please Select
Group
Options can be grouped with nested data.
Blue
Custom
React-select allow us to make customization the building block of the component, refer here for more detail infomation
United State
China
JapanAsync on Search
Use the Async component to load options from a remote source as the user types.
Select...
Load Options on Expand
We can also load options upon clicking the Select.
Select...
Creatable
Example of creating new option via Select input.
Type something...
API
Select
| Prop | Description | Type | Default |
|---|---|---|---|
| componentAs | Receive extensive component from react-select, such as Async & Creatable | ReactNode | ReactSelect |
| size | Select size | 'lg' | 'md' | 'sm' | 'md' |
Dependencies
React Select
Select is a wrapper component of react-select.
All react-select props can be applied on this component, refer official docs for the complete api list.