Select

Display a dropdown list of items.

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

General

Basic usage.

Type

Differentiate states by color.

Disabled

Disable all options.

Disabled Option

disable specified options.

Without Icon

Hide icon on right.

Labels

show data as a group.

Divider

Multiple

Select supports multiple values to be selected.

Multiple without clear

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

Compose

Use with other components.

Over width

Option to show more text with adaptive width.

Set parent element

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

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

AttributeDescriptionTypeAccepted valuesDefault
value(required)unique ident valuestring--
disableddisable current optionboolean-false
dividerdisplay a lineboolean-false
labeldisplay a group titleboolean-false
...native propsHTMLAttributes'name', 'id', ...-

SelectRef

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

SelectTypes

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