Select

v2.4.0

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

yarn add @welcome-ui/select @xstyled/styled-components @xstyled/system prop-types react react-dom styled-components

import { Select } from '@welcome-ui/select'

import { Select } from '@welcome-ui/select'

Default

Social networks

Clearable

Social networksGithub
{
  "welcome2": [
    "github",
    "twitter"
  ]
}{
  "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.

Social networks
Github
Twitter
{
  "welcome3": [
    "github",
    "twitter"
  ]
}{
  "welcome3": [
    "github",
    "twitter"
  ]
}

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

Social networks
Github
Twitter
{
  "welcome4": [
    "github",
    "twitter"
  ]
}{
  "welcome4": [
    "github",
    "twitter"
  ]
}

Searchable

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

Social networks

Add an icon

Pass icon to decorate your Select

Social networks

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

Social networks Twitter
{
  "welcome7": "twitter"
}{
  "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' }

Social networks

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

Social networks

Using allowUnselectFromList and disableCloseOnSelect

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

Filters
Github
Twitter
{
  "welcome9": [
    "github",
    "twitter"
  ]
}{
  "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.

Social networks
Github
Twitter
{
  "welcome10": [
    "github",
    "twitter"
  ]
}{
  "welcome10": [
    "github",
    "twitter"
  ]
}

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

Social networks

Properties

Name	Type(s)	Default
allowUnselectFromList	bool
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
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

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

Made with by