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
| 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' | 'secondary' | 'success' | 'warning' | 'error'
Contributors