Select ready Storybook
The Select component is a customizable select input component that allows users to select one or more options from a dropdown list. It is built on top of the react-select library.
When to use
This component is particularly useful when you have a large number of options to choose from. Additionally, consider using Select in favor of radio button components when you have more than 4 options to choose from.
Types and Behaviors
Basic Select
The Select component can be used to create a basic select input that allows users to select one option from a dropdown list. The isClearable
prop can be used to allow the selected value(s) to be cleared. The isLoading
prop can be used to indicate that the select input is in a loading state.
const Basic = () => { const [value, setValue] = React.useState<SelectableValue<string>>(); const options = [ { label: 'Option 1', value: '1' }, { label: 'Option 2', value: '2' }, { label: 'Option 3', value: '3' }, ]; return ( <Container> <Select options={options} value={value} onChange={(v) => { setValue(v); }} /> </Container> ); }; render(<Basic />);
Multi Select
The Select component can be configured to allow users to select multiple options from a dropdown list. The isMulti
prop must be set to true to enable this behavior. The maxVisibleValues
prop can be used to limit the number of selected values to display. The showAllSelectedWhenOpen
prop can be used to display all selected values when the dropdown list is open.
Async Select
The Select component can be configured to allow users to select one or more options from a dropdown list that is populated asynchronously. The loadOptions
prop must be set to a function that returns a promise that resolves to an array of options. The defaultOptions
prop can be used to provide options that are displayed before the user starts typing. In this case the options will be loaded on component mount. The cacheOptions
prop can be used to cache the options that are loaded asynchronously.
const loadAsyncOptions = (inputValue: string) => { return new Promise<Array<SelectableValue<string>>>((resolve) => { setTimeout(() => { resolve([ { label: 'Option 1', value: '1' }, { label: 'Option 2', value: '2' }, { label: 'Option 3', value: '3' }, ]); }, 1000); }); }; const BasicSelectAsync = () => { const [value, setValue] = React.useState<SelectableValue<string>>(); return ( <Container> <AsyncSelect loadOptions={loadAsyncOptions} defaultOptions value={value} onChange={setValue} /> </Container> ); }; render(<BasicSelectAsync />);
Creating custom values
The Select component can be configured to allow users to create new options. The allowCustomValue
prop must be set to true to enable this behavior. Additionally, the onCreateOption
prop must be set to a function that is called when the user creates a new option.
const CustomValueCreation = () => { const [value, setValue] = React.useState<SelectableValue<string>>(); const [customOptions, setCustomOptions] = React.useState<Array<SelectableValue<string>>>([]); const options = [ { label: 'Option 1', value: '1' }, { label: 'Option 2', value: '2' }, { label: 'Option 3', value: '3' }, ]; return ( <Container> <Select options={[...options, ...customOptions]} value={value} onChange={(v) => { setValue(v); }} allowCustomValue onCreateOption={(v) => { const customValue: SelectableValue<string> = { value: v, label: v }; setCustomOptions([...customOptions, customValue]); setValue(customValue); }} /> </Container> ); }; render(<CustomValueCreation />);
Virtualized option list
The Select component can be configured to use virtualized option list. The virtualized
prop must be set to true to enable this behavior. The maxVisibleValues
prop can be used to limit the number of selected values to display. The showAllSelectedWhenOpen
prop can be used to display all selected values when the dropdown list is open. The isClearable
prop can be used to allow the selected value(s) to be cleared. The isLoading
prop can be used to indicate that the select input is in a loading state.
Adding icons to Select
A custom icon can be added to Select, which will be displayed before the selected value, by using a prefix
prop.
const SelectWithIcon = () => { const [value, setValue] = React.useState<SelectableValue<string>>(); return ( <Container> <Select options={[ { label: 'Option 1', value: '1' }, { label: 'Option 2', value: '2' }, { label: 'Option 3', value: '3' }, ]} value={value} onChange={setValue} prefix={<Icon name={'arrow-down'} />} /> </Container> ); }; render(<SelectWithIcon />);