Select
It is based on the downshift library.
Install and import
Default
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
Name | Type(s) | Default | Required |
---|---|---|---|
allowUnselectFromList | bool We need to add `autoComplete` off to avoid select UI issues when is an input | ||
autoComplete | string | off | |
autoFocus | bool | ||
disableCloseOnSelect | bool | ||
disabled | bool | ||
groupsEnabled | bool | ||
icon | union | ||
id | string | ||
isClearable | bool | ||
isCreatable | bool | ||
isMultiple | bool | ||
isSearchable | bool | ||
name | string | ||
onBlur | func | ||
onChange | func | ||
onClick | func | ||
onCreate | func | ||
onFocus | func | ||
onKeyDown | func | ||
onKeyUp | func [{ label: `string` | `number`, value: `string` | `number` }] | ||
options | arrayOf | [] | |
placeholder | string | Choose from… | |
renderCreateItem | func | inputValue => `Create "${inputValue}"` | |
renderGroupHeader | func | ||
renderItem | func | itemToString | |
renderMultiple | func | MultipleSelections | |
size | sm md lg | lg | |
type | checkbox email file password radio search tel text | ||
value | enum | string | arrayOf | number | arrayOf | ||
variant | error info success valid warning |
Dependencies
- - @welcome-ui/clear-button^2.0.2
- - @welcome-ui/icons.down^2.0.2
- - @welcome-ui/system^2.0.2
- - @welcome-ui/tag^2.0.2
- - @welcome-ui/utils^2.0.2
- - downshift=3.2.10
- - match-sorter=3.1.1
Peer dependencies
- - @xstyled/styled-components^1.17.0
- - @xstyled/system^1.17.0
- - prop-types^15.7.2
- - react^16.10.2
- - react-dom^16.10.2
- - styled-components^4.0.0 || ^5.0.0