The Select component is a dropdown menu that allows users to choose one or multiple options from a list of predefined choices. It provides a compact and efficient way to present a large set of options, enhancing user experience by simplifying selection tasks. This component is commonly used in forms, filters, and settings.
import * as React from 'react'
import { Select } from 'welcome-ui/Select'
import type { SelectProps } from 'welcome-ui/Select/types'
export const ITEMS = [
{ label: 'Bold', value: 'bold' },
{ label: 'Italic', value: 'italic' },
{ label: 'Strikethrough', value: 'strikethrough' },
{ label: 'Underline', value: 'underline' },
]
const Example = () => {
const [value, setValue] = React.useState<SelectProps['value']>()
const handleChange = (newValue: SelectProps['value']) => {
setValue(newValue)
}
return <Select isClearable name="welcome" onChange={handleChange} options={ITEMS} value={value} />
}
export default Example
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.
To be able to filter (i.e. search) the results, add the isSearchable prop. You can also pass a renderNoResults function to display a custom message when no results match the search query.
Pass icon to decorate your Select
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).
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' }
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
These two options combined allows you, for example, to build a filter dropdown with checkboxes on each items.
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