Select
Allows user to select one or mutilple choices.
version
5.0.0-alpha.33
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
Properties #
Name | Type(s) | Default | Required |
---|---|---|---|
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" |