Name | Type | Default | Description |
---|---|---|---|
id required | string | Unique identifier | |
buttonPrepend | ReactNode | Content to display in the toggle button, before the selected option | |
canClear | boolean | Whether a selected item can be unselected | |
children | ReactNode | ||
classes | string[] | Additional CSS classes to set on the list element | |
customButton | ComponentType<ISelectButtonProps> | A component to render instead of the default button. The button is what is displayed when the dropdown is not opened and used to open it. | |
deselectTooltipText | string | The text that appears when hovering over the button to unselect an item | |
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) | |
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 | |
noActive | boolean | If true, no highlight will be rendered on active items. An item is active when using keyboard navigation | |
noFixedWidth | boolean | If true, the dropdown content can have a width that is larger than the button | |
noResultItem | IItemBoxProps | {value: 'No Items'} | The content shown in the list of items when there are no items to display. |
onSelectOptionCallback | (option: string) => void | A callback function executed after the selected item changes
| |
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 |
selectClasses | string | Additional CSS classes to set on the outermost element | |
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 single select to have users filter options from a long list and select only one. A single select is especially appropriate when the list of available options is very long or when the space is limited.
List options in alphanumerical order unless a more suited ordering rationale applies, for example when listing size or security level options.
Always include the ability to filter options when the list contains 20 or more.
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 instance, write "Favorite drink" rather than "Select your favorite drink".
Labels identify each option and should be self-explanatory. The width of the input should fully display the name 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 a drink" rather than "Select an option".
Allow the addition of custom values only when it doesn't increase the risk of failure and when there may be options other than those listed.
Examples:
If your use case doesn't match the guidelines above, consider using one of the following components instead: