WUI 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@welcome-ui/select
OverviewProps

Select

allowUnselectFromList

Boolean

autoComplete

string | undefined = off

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

autoFocus

Boolean

disableCloseOnSelect

Boolean

disabled

Boolean

groupsEnabled

Boolean

hasIcon

Boolean

icon

ReactElement<any, string | JSXElementConstructor<any>>

iconPlacement

"right" | "left" | "both"

id

string

isClearable

Boolean

isCreatable

Boolean

isMultiple

Boolean

isSearchable

Boolean

name

string

onBlur

() => void

onChange

(value: OptionValue | OptionValue[], event?: CreateEvent) => void

onClick

(event: MouseEvent<HTMLElement, MouseEvent>) => void

onCreate

(option: string, event: CreateEvent) => void

onFocus

() => void

options
Required

Options

placeholder

string | undefined = Choose from…

renderCreateItem

(inputValue: SelectValue) => void | undefined = (inputValue: string) => `Create "${inputValue}"`

renderGroupHeader

(option: OptionGroup) => ReactNode

renderItem

(item: unknown, isItemSelected?: boolean) => string | ReactElement<any, string | JSXElementConstructor<any>> | undefined = (item: Option): string => (item ? item.label : EMPTY_STRING)

renderMultiple

(values: Option[], handleRemove: (value: string) => void) => ReactElement<any, string | JSXElementConstructor<any>>

size

"xs" | "sm" | "md" | "lg" | undefined = md

transparent

Boolean

value

string | number | Option | string[] | (string | number | Option)[]

variant

"error" | "focused" | "info" | "success" | "warning"

StyledSelect

SearchSlider