Name | Type | Default | Description |
---|---|---|---|
id required | string | Unique identifier | |
children | ReactNode | ||
classes | string[] | Additional CSS classes to set on the list element | |
deselectAllTooltipText | string | "Deselect All" | The text displayed when hovering over the deselect all button |
disabled | boolean | Whether the SingleSelect is disabled | |
dropClasses | string | Additional CSS classes to set on the dropdown element | |
dropOption | Partial<IDropPodProps> | Additional Drop props to set on the Drop component (see IDropPodProps interface) | |
emptyPlaceholder | string | "No selected option" | The text displayed in the multi select box when no items are selected |
footer | ReactNode | Content that is displayed underneath the list of items inside the dropdown | |
hasFocusableChild | boolean | Whether the dropdown has a child that needs to receive the focus upon opening the dropdown, for example: a filter input. | |
isLoading | boolean | Whether the items are currenty loading (being fetched). If true, it will render visual loading placeholders in the ListBox | |
items | IItemBoxProps[] | The list of items to display as potential choices | |
multiSelectStyle | CSSProperties | {} | Additional CSS inline style to add on the multiselect container |
noActive | boolean | If true, no highlight will be rendered on active items. An item is active when using keyboard navigation | |
noDisabled | boolean | false | 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. |
noResultItem | IItemBoxProps | {value: 'No Items'} | The content shown in the list of items when there are no items to display. |
onUpdate | () => void | 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. | |
placeholder | string | "Select an option" | The text displayed in the button when no item is selected |
readOnly | boolean | Whether the multiselect is in read only mode. When in read only mode, only the selected option are displayed, greyed out. | |
selectClasses | string | Additional CSS classes to set on the outermost element | |
sortable | boolean | false | Whether the selected items can be reordered using drag-and-drop |
toggleClasses | string | Additional CSS classes to set on the toggle button | |
wrapItems | (items: ReactNode) => ReactNode | Useful if you need to wrap the list of items with another component. We use this when combining with the InfiniteScroll HOC
|
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.
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".
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.
Examples:
If your use case doesn't match the guidelines above, consider using one of the following components instead: