Content to display in the toggle button, before the selected option
Whether a selected item can be unselected
Additional CSS classes to set on the list element
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.
The text that appears when hovering over the button to unselect an item
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)
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
If true, no highlight will be rendered on active items. An item is active when using keyboard navigation
If true, the dropdown content can have a width that is larger than the button
The content shown in the list of items when there are no items to display.
A callback function executed after the selected item changes
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
Additional CSS classes to set on the outermost element
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
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.
If your use case doesn't match the guidelines above, consider using one of the following components instead: