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

Select

allowUnselectFromList

Boolean

autoComplete

string | undefined = off

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

dataTestId

string

disableCloseOnSelect

Boolean

groupsEnabled

Boolean

hasIcon

Boolean

icon

ReactElement<any, string | JSXElementConstructor<any>>

iconPlacement

"both" | "left" | "right" | undefined = left

isClearable

Boolean

isCreatable

Boolean

isMultiple

Boolean

isSearchable

Boolean

onChange

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

onClick

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

onCreate

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

options

SelectOptionsType | undefined = []

renderCreateItem

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

renderGroupHeader

(option: SelectOptionGroup) => ReactNode

renderItem

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

renderMultiple

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

size

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

transparent

Boolean

value

string | number | SelectOption | (string | number | SelectOption)[] | string[]

variant

"danger" | "success" | "warning"

SearchSlider