import * as React from 'react'import { Select, SelectProps } from '@welcome-ui/select'export const ITEMS = [{ value: 'bold', label: 'Bold' },{ value: 'italic', label: 'Italic' },{ value: 'strikethrough', label: 'Strikethrough' },{ value: 'underline', label: 'Underline' },]const Example = () => {const [value, setValue] = React.useState<SelectProps['value']>()const handleChange = (newValue: SelectProps['value']) => {setValue(newValue)}return <Select name="welcome" onChange={handleChange} options={ITEMS} value={value} />}export default Example
Installation
Run the following command:
yarn add @welcome-ui/select
Import component:
import { Select } from '@welcome-ui/select'
Clearable
Multiple values
Just add the isMultiple
prop. Note: to be able to choose multiple values you must pass an array for the value
.
Render multiple
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' }
Custom creatable
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
allowUnselectFromList and disableCloseOnSelect
These two options combined allows you, for example, to build a filter dropdown with checkboxes on each items.
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