Display a dropdown list of items.
The Select contain an additional Hooks, see subsection useModal for details.
Basic usage.
Differentiate states by color.
Use filled, light, ghost or subtle with a type to change the surface of the field.
Use filled, light, ghost or subtle with a type to change the surface of the field.
Disable all options.
disable specified options.
Hide icon on right.
show data as a group.
You can use the divider of the Select with the property divider.
Select supports multiple values to be selected.
Select supports multiple values to be selected without the clear icon.
Use with other components.
Option to show more text with adaptive width.
you can specify the container for drop-down box rendering.
Keep the chosen values in state and say what they produce. A Select per filter reads better than one long list.
| 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 |
| 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', ... | - |
| 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', ... | - |
type SelectRef = {
focus: () => void
blur: () => void
scrollTo?: (options?: ScrollToOptions) => void
}
type SelectTypes =
'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info'