Select

About #

It is based on the downshift library.

Usage #

With Field #

Clearable #

Multiple values #

Just add the isMultiple prop. Note: to be able to choose multiple values you must pass an array for the value.

Passing a renderMultiple function allows you to format the selected items below the select.

Searchable #

To be able to filter (i.e. search) the results, add the isSearchable prop.

Add an icon #

Pass icon to decorate your Select

Formatting options #

Passing a renderItem function allows you to format the options in the list.

Note: if you use renderItem with isSearchable or isCreatable the selected item will not be formatted

Note: if you want to format the options and the placeholder, create a dummy value as the first of your options with an empty string as the value (see code below).

Creatable #

You can add items by passing the isCreatable prop. The returned item will be of the shape:

{ value: 'name-to-be-kebab-cased', label: 'Name to be kebab-cased' }

Creatable with custom create button #

Passing a renderCreateItem function allows you to format the create button in the list. It is a function and receives the input value as argument

Using allowUnselectFromList and disableCloseOnSelect #

These two options combined allows you, for example, to build a filter dropdown with checkboxes on each items.

Combining props #

You can pass any combination of the props above. For example below, we have a Select that allows you to search the options, choose multiple options, and create new options.

With option groups #

To use option groups, you must provide two additional props: groupsEnabled that allow nested options and renderGroupHeader that renders the header of a specific group

Properties #

Packages #

Dependencies #

Peer dependencies #