Select

Display a dropdown list of items.

The Select contain an additional Hooks, see subsection useModal for details.

General

Basic usage.

Preview

See code

Select one

Type

Differentiate states by color.

Preview

See code

Default

Value 1

Value 2

Value 1

Value 2

Value 1

Value 2

Disabled

Disable all options.

Preview

See code

Select one

Disabled Option

disable specified options.

Preview

See code

Select one

Without Icon

Hide icon on right.

Preview

See code

Select one

Labels

show data as a group.

Preview

See code

Technologies

Divider

You can use the divider of the Select with the property divider.

Preview

See code

Technologies

Multiple

Select supports multiple values to be selected.

Preview

See code

React

Vue

Rails

Express

Multiple Without Clear

Select supports multiple values to be selected without the clear icon.

Preview

See code

React

Vue

Rails

Express

Compose

Use with other components.

Preview

See code

TypeScript

Over Width

Option to show more text with adaptive width.

Preview

See code

Truncate an overly long string

Autoscale option width when text is too long

Set parent element

you can specify the container for drop-down box rendering.

Preview

See code

APIs

Select.Props

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`
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'

Edit this page on GitHub

Rating

Slider

MADE & DESIGNED WITHBY BRUNO ANDRADE