v0.27.0
MultiSelect are typeable inputs with multiple selectable dropdown items. Selects Design Guidelines.
Edit the code below to see your changes live!
Prop Name | Type | Default | Description |
---|---|---|---|
action | SelectAction |
| Action option displayed at the end of the list. |
description | string | FormControlDescription |
| Append a description to the select field. |
disabled | boolean | false | Disables the |
error | string |
| Displays a form error around the field. |
filterable | boolean | true | Allows you to filter the |
inputRef | React.Ref<HTMLInputElement> | React.RefObject<HTMLInputElement> |
| The provided ref will be used for the underlying input element used in the |
label | string | FormControlLabel |
| Adds a label to the field. |
labelId | string |
| Adds a custom id to the label. |
maxHeight | number | 250 | Sets a |
onOptionsChange * | (value: [any], option: [SelectOption]) => void |
| Callback called with value of selected option. |
options * | Array<SelectOption> |
| Accepts an array of |
placement | auto-start | auto | auto-end | top-start | top | top-end | right-start | right | right-end | bottom-end | bottom | bottom-start | left-end | left | left-start | bottom-start | Determines the location in which the dropdown will be placed. |
positionFixed | boolean | false | If set, uses |
required | boolean |
| Sets the field as required. |
value | [any] |
| Modifies the current selected value of the field. |
Props ending with * are required
Prop Name | Type | Default | Description |
---|---|---|---|
disabled | boolean | false | Sets the |
content * | string |
| 'Sets the text content of the |
description | string |
| Sets the content description of the |
icon | Icon |
| Pass in an Icon component to display to the left of the text. Only available for single select. |
value * | any |
| 'Stored value of the |
Props ending with * are required
Prop Name | Type | Default | Description |
---|---|---|---|
actionType | normal | destructive | normal | 'Indicates whether the |
disabled | boolean | false | 'Sets the |
content * | string |
| 'Sets the text content of the |
description | string |
| Sets the content description of the |
icon | Icon |
| Pass in an Icon component to display to the left of the text. |
onClick | (inputText: string): void |
| Returns the current text in the input. |
Props ending with * are required
MultiSelect can be anchored in different directions with the position
property. It will automatically find a position if there's not enough space in the chosen direction.
Edit the code below to see your changes live!
Once the content is longer than the max-height, the Dropdown will be scrollable. It is possible to modify the dimension by passing a maxHeight
property.
Edit the code below to see your changes live!
It is possible to disable the entire select component, similar to how you would disable a native HTML select element, by using the disabled
property.
Edit the code below to see your changes live!
Accepts an action
object to display at the end of the list.
Edit the code below to see your changes live!
An error
prop receives a string
to display.
Edit the code below to see your changes live!
It is possible to add a description for select options and actions.
Edit the code below to see your changes live!