Select

Attribute	Description	Type	Accepted values	Default
value	selected value	`string`, `string[]`	-	-
initialValue	initial value	`string`, `string[]`	-	-
placeholder	placeholder string	`string`	-	-
width	css width value of select	`string`	-	`initial`
type	current type	`SelectTypes`	SelectTypes	`default`
icon	icon component	`ComponentType`	-	`SVG Component`
pure	remove icon component	`boolean`	-	`false`
multiple	support multiple selection	`boolean`	-	`false`
clearable	add clear icon on multiple selection (ignored otherwise)	`boolean`	-	`true`
disabled	disable current radio	`boolean`	-	`false`
error	mark the field as invalid	`boolean`	-	`false`
errorMessage	message shown below the field	`string`	-	-
rounded	round the corners	`boolean`	-	`false`
filled	filled variant	`boolean`	-	`false`
light	light variant	`boolean`	-	`false`
ghost	outline variant	`boolean`	-	`false`
subtle	subtle variant	`boolean`	-	`false`
rounded	round the corners	`boolean`	-	`false`
filled	filled variant	`boolean`	-	`false`
light	light variant	`boolean`	-	`false`
ghost	outline variant	`boolean`	-	`false`
subtle	subtle variant	`boolean`	-	`false`
onChange	selected value	`(val: string \| string[]) => void`	-	-
dropdownClassName	className of dropdown menu	`string`	-	-
dropdownStyle	style of dropdown menu	`object`	-	-
disableMatchWidth	disable Option from follow Select width	`boolean`	-	`false`
getPopupContainer	dropdown render parent element, the default is `body`	`() => HTMLElement`	-	-
onDropdownVisibleChange	dropdown change events	`(visible: boolean) => void`	-	-
ref	forwardRef	`SelectRef`	SelectRef	-
...	native props	`HTMLAttributes`	`'name', 'alt', ...`	-

Select.Option.Props

Attribute	Description	Type	Accepted values	Default
value(required)	unique ident value	`string`	-	-
disabled	disable current option	`boolean`	-	`false`
divider	display a line	`boolean`	-	`false`
label	display a group title	`boolean`	-	`false`
...	native props	`HTMLAttributes`	`'name', 'id', ...`	-

SelectRef

type SelectRef = {
  focus: () => void
  blur: () => void
  scrollTo?: (options?: ScrollToOptions) => void
}

SelectTypes

type SelectTypes =
  'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info'

Accessibility

• The field is a combobox with aria-haspopup="listbox" and aria-expanded, and the list is a listbox of option elements. Its placeholder is the name when you do not pass one.
• With the focus on the field, the arrows, Enter and Space open the list. Up and Down arrows move between the options and skip the disabled ones, Home and End go to the first and the last, Enter and Space choose the option, and Escape closes the list. Typing letters goes to the option that starts with them, and opens the list when it is closed. With multiple, Enter toggles the option and the list stays open.
• With multiple, each chosen value has a button named "Remove" followed by its text, such as "Remove Brazil".
• The option the keyboard is on is announced through aria-activedescendant, so the focus stays on the field.
• Without a visible label, pass aria-label or aria-labelledby.

Edit this page on GitHub