Select

It is based on the downshift library.

Install and import

yarn add @welcome-ui/select @xstyled/styled-components @xstyled/system prop-types react react-dom styled-components
import { Select } from '@welcome-ui/select'

Default

Clearable

{
"welcome2": [
"github",
"twitter"
]
}

Multiple values

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

{
"welcome3": [
"github",
"twitter"
]
}

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

{
"welcome4": [
"github",
"twitter"
]
}

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).

{
"welcome7": "twitter"
}

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.

{
"welcome9": [
"github",
"twitter"
]
}

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.

{
"welcome10": [
"github",
"twitter"
]
}

Properties

NameType(s)DefaultRequired
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
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
options
arrayOf

[{ label: string | number, value: string | number }]

[]
placeholder
string
Choose from…
renderCreateItem
func
inputValue => `Create "${inputValue}"`
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

Peer dependencies