No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

Select
The Select component allows a user to select from a list of options.
In line with trying to emulate the native os <select />s as well as possible, this Select component implements keyboard navigation in line with the behaviour of OSX' native <select /> implementation, including keyboard searchability which resets a given search-input after a timeout (configurable through the clearSearchAfter prop).
Basic Select
The most basic usage of the Select component comes in the form of using just strings as both the value of the option as well as the contents of the option.
() => {
    const [value, setValue] = useState('ant');

    return (
        <SelectTwo value={value} onValue={setValue}>
            <Option title="Ant" value="ant" />
            <Option title="Zebra" value="zebra" />
        </SelectTwo>
    );
}
Select multiple options
We can allow the user to select multiple options by specifying the mode prop and ensuring the value prop is a list.
Dropdown items become togglable & selecting an item will not auto-close the dropdown.
Rich option content
Any rich option content is supported through React's children api as the following example demonstrates by using icons inside the children of the <Option /> component's children prop.
Complex values
As opposed to native selects, this Select component allows for <Option /> values to be of complex types (e.g. Object).
 Important note 
Under the hood, Select uses reference equality comparisons to determine which options are selected. When using complex values, make sure the value prop actually references one of the selected <Option /> values. In practice, make sure your options are re-cycled through out render cycles by either wrapping them in a useRef or useMemo hook.
InputField
The Select component can be uses as an input for InputField.
Searchable Select
This component will add a search input field inside of the select dropdown in order to filter out the options data. You can pass a custom search function if necessary.
Searchable & Multiple options
Allow searching while selecting multiple results. The selected options are preserved through out the search. Selecting an item will not auto-close the dropdown : each item can be toggled.
Custom display value rendering
The renderSelected prop allows customisation of the rendered display value.
Accessibility
This component supporting complex values, together with the fact that option contents can be rich in nature causes an uncertainty about which human-readable part of either value or children can be used for accessibility labels.
To make up for this, an API anomaly is introduced for this component making the title prop of the option required, however, in the case that you're using Select in it's most basic form (string value & string children) you're only required to pass title & value, leaving children out (as can be seen in the Basic Select) example.
No inputs found for this component. Read the docs