Additional CSS classes to set on the list element
The text displayed when hovering over the deselect all button
Whether the SingleSelect is disabled
Additional CSS classes to set on the dropdown element
Additional Drop props to set on the Drop component (see IDropPodProps interface)
The text displayed in the multi select box when no items are selected
Content that is displayed underneath the list of items inside the dropdown
Whether the dropdown has a child that needs to receive the focus upon opening the dropdown, for example: a filter input.
Whether the items are currenty loading (being fetched). If true, it will render visual loading placeholders in the ListBox
The list of items to display as potential choices
Additional CSS inline style to add on the multiselect container
If true, no highlight will be rendered on active items. An item is active when using keyboard navigation
Setting this to true allows to open the dropdown even if all the items are selected. It is useful if adding custom values is allowed.
The content shown in the list of items when there are no items to display.
A callback function that is executed whenever an update of the items array is required. For example if a filter was applied and the filter is done on the server.
The text displayed in the button when no item is selected
Whether the multiselect is in read only mode. When in read only mode, only the selected option are displayed, greyed out.
Additional CSS classes to set on the outermost element
Whether the selected items can be reordered using drag-and-drop
Additional CSS classes to set on the toggle button
Useful if you need to wrap the list of items with another component. We use this when combining with the InfiniteScroll HOC
With a filter and custom values
Use a Multi select for when users need to filter and select options from a long list. A Multi select is especially appropriate when the available list of options is very long or when space is limited.
List options in alphanumerical order unless a more suited ordering rationale applies. For example, when listing size (large to small) or security level options (full access to limited access).
When a list contains 20 or more options, include the ability to filter them.
Keep titles and labels short, preferably under three words.
The title should indicate the type of information to provide.
Provide a descriptive title without action verbs. For example, write "Grocery list" rather than "Select the desired items".
Labels identify each option and should be self-explanatory. The width of the input should allow to fully display the label of the selected option.
Use a consistent writing style for all options in the list.
Help Text and Instructions
The placeholder text should indicate the type of information to select. Use an action verb. For example, write "Select an ingredient" rather than "Select an option".
Feedback and Validation
Allow the addition of custom values only when it doesn't increase the risk of failure and when there's a possibility that not all available options are listed.
- When users select countries: do not allow custom values.
- When users build a grocery list: allow custom values so that users can request new products that may not be on the list yet.
If your use case doesn't match the guidelines above, consider using one of the following components instead:
- Multiline box - When space is not an issue or when legibility of the selected option is critical.
- Checkbox - When there are seven options or less.
- Single select - When users can select only one option from the list.