WUI logo

Select

Allows user to select one or mutilple choices.

version

5.14.0

install

yarn add @welcome-ui/select

usage

import { Select } from '@welcome-ui/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

With option groups, multiple selection and searchable #

Properties #

NameType(s)DefaultRequired
autoComplete
string

We need to add `autoComplete` off to avoid select UI issues when is an input

off
autoFocus
Boolean
disabled
Boolean
icon
ReactElement<any, string | JSXElementConstructor<any>>
id
string
isClearable
Boolean
isCreatable
Boolean
isMultiple
Boolean
isSearchable
Boolean
options
Options
name
string
onBlur
() => void
onClick
(event: MouseEvent<HTMLElement, MouseEvent>) => void
onChange
(value: OptionValue | OptionValue[], event?: CreateEvent) => void
onCreate
(option: string, event: CreateEvent) => void
onFocus
() => void
placeholder
string
Choose from…
renderCreateItem
(inputValue: SelectValue) => void
(inputValue: string) => `Create "${inputValue}"`
renderItem
(item: unknown, isItemSelected?: boolean) => string | ReactElement<any, string | JSXElementConstructor<any>>
(item: Option): string => (item ? item.label : EMPTY_STRING)
renderMultiple
(values: Option[], handleRemove: (value: string) => void) => ReactElement<any, string | JSXElementConstructor<any>>
value
string
number
Option
string[]
(string | number | Option)[]
allowUnselectFromList
Boolean
disableCloseOnSelect
Boolean
groupsEnabled
Boolean
renderGroupHeader
(option: OptionGroup) => ReactNode
transparent
Boolean
size
"xs"
"sm"
"md"
"lg"
md
variant
"error"
"focused"
"info"
"success"
"warning"
hasIcon
Boolean
iconPlacement
"right"
"left"
"both"

Packages #

Dependencies #
Peer dependencies #

Previous

Search