Multiselect
Multiselect lets users select multiple items from a list. Options are dynamically filtered as a user types in the input field and their selections appear as tags in the input field.
Table of Contents
Used for this
- To choose multiple items from a list of options
- To filter through a set of data by typing
How to use it
Default
The typical usage of a Multiselect component.
Hidden label
Multiselect labels can be hidden.
Overflow
A Button indicating the number of “overflowing” Tags lets users see any Tags that don’t fit.
Size
Multiselect comes in two sizes: default or compact.
Configuration
- Name8.42.0•View source•View on npm
- Installnpm install @zendeskgarden/react-dropdowns
- Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
- Importimport { Dropdown, Field, Hint, Item, Label, Multiselect } from '@zendeskgarden/react-dropdowns'
API
Dropdown
| Prop name | Type | Default | Description |
|---|---|---|---|
downshiftProps | object | – | Passes customization props to the Downshift component |
highlightedIndex | number | – | Highlights an element at a selected index |
inputValue | string | – | Sets the value of the input element |
isOpen | boolean | – | Opens the dropdown |
onInputValueChange | – | Handles input value change Parameters inputValue Value of the input elementstateAndHelpers Downshift state and helpers | |
onSelect | – | Handles item selection Parameters selectedItem The selected itemstateAndHelpers Downshift state and helpers | |
onStateChange | – | Handles state change Parameters options Downshift internal state changesstateAndHelpers Downshift state and helpers | |
selectedItem | any | – | Identifies the currently selected item |
selectedItems | any[] | – | Identifies the currently selected items |
Field
Extends HTMLAttributes<HTMLDivElement>
Hint
Extends HTMLAttributes<HTMLDivElement>
Item
Extends LiHTMLAttributes<HTMLLIElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
disabled | boolean | – | Indicates that the element is not interactive |
value | any | – | Sets the value that is returned upon selection |
Label
Extends LabelHTMLAttributes<HTMLLabelElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
isRegular | boolean | – | Applies regular (non-bold) font weight |
Multiselect
Extends HTMLAttributes<HTMLDivElement>
| Prop name | Type | Default | Description |
|---|---|---|---|
disabled | boolean | – | Indicates that the element is not interactive |
focusInset | boolean | – | Applies inset box-shadow styling on focus |
inputRef | Ref<HTMLInputElement> | – | Provides DOM access to the underlying input element |
isBare | boolean | – | Removes borders and padding |
isCompact | boolean | – | Applies compact styling |
maxItems | number | 4 | Determines the maximum number of items displayed while collapsed |
placeholder | string | – | Defines text that appears in the element when no items are selected |
renderItem | Required | Renders each item element. Designed to be used with Tag. Parameters options Rendered item optionsReturns item element | |
renderShowMore | – | Overrides the "+ N more" text displayed when the total number of items exceeds maxItemsParameters value The number of hidden itemsReturns replacement for the "+ N more" text | |
start | any | – | Defines the icon rendered before the element's content |
validation | VALIDATION | – | Defines the element's validation state |