Welcome UI logo

Select

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.

Source
OverviewProps
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

Examples

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

SearchSlider