Select panel

Options

Single Selection

For single-item selection, the panel closes immediately upon selection. The selected item is indicated by a checkmark. Set the selectionVariant prop on ActionList to single.

Multi Selection

For multi-item selection, the panel remains open after each selection, allowing users to choose multiple items before closing the panel to confirm their choices. Selections are visually indicated by faux checkboxes. Set the selectionVariant prop on ActionList to multiple.

Groups

Items can be grouped to provide additional context or to visually separate them. Each group can have a title for better organization.

Footer

An optional footer at the bottom can include a link or button for additional actions.

Opening

Select panels can be activated via a semantic button, which can be either a regular button or an icon button. If the button represents the current selection, it must have an associated label, either internally (within the button) or externally (adjacent to the button).

Anatomy

The select panel consists of three main areas: a header, a scrollable list that can be filtered, and an optional footer:

• Header: Includes a title and a close button.
• Input and List (scrollable): The scrollable list contains action list items, which can be either single or multi-select options. The input field allows users to quickly filter the list.
• Footer: Can contain an actionable button.

Best Practices

Empty State

When no results are available, offer users an explanation instead of leaving a blank space. There can be various reasons for the absence of results. It could be due to the search or filter input value not matching any available data, or it could be because the user has yet to generate any data to display.

Loading

Provide visual cues to users when processes may take longer than expected. Use loading states at different stages to communicate effectively.

1. Initial: Use when retrieving initial data to prevent users from seeing an empty list.
2. Initial (skeleton): Use a skeleton loader when retrieving initial data to prevent users from seeing an empty list.
3. Searching/Filtering: When users search for new items, maintain their current selections and use a minimal loading state to indicate ongoing activity.

Current Selection

To make the current selection clear, display the selected items at the beginning of the list. This behavior should occur when opening the select panel, after users clear the input or when they change the filter value. Avoid reordering items after selection to prevent disorientation.

Error/Warning Handling

When things don't work as expected, or users need to be informed about important issues, we handle these scenarios appropriately. If default values fail to load, we display an error placeholder to inform the user. When users search for new values and the search fails, we display an error message above the input.

Behavior

The select panel opens when the trigger button is activated by a click, Enter, or Space.

Interactions

Focus is initially placed on the input field and the first item in the list, which are connected as one focusable entity. Users can type to filter the list or navigate using ArrowUp and ArrowDown.

Apply Changes

Closing the select panel applies all changes. It can be closed by clicking the trigger button again, the close button, clicking outside the panel, or pressing the Esc key.

Keyboard Navigation