selectpanel

14 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Select panel component description

The Select Panel is an anchored dialog that allows users to quickly navigate and select one or multiple items from a list. It includes a text input for filtering, supports item grouping, and offers a footer for additional actions. Changes are applied upon closing the panel.

Single selection behavior

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-item selection behavior

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.

Select panel anatomy

The select panel consists of three main areas: a header that includes a title and a close button; a scrollable list that can be filtered using an input field; and an optional footer that can contain an actionable button.

Item grouping

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

Select panel opening controls

Select panels are 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).

Select panel empty state best practice

When no results are available, offer users an explanation instead of leaving a blank space. Reasons for absence of results can vary: the search or filter input value may not match any available data, or the user may not have generated any data to display yet.

Select panel loading states

Provide visual cues to users when processes may take longer than expected. Use three loading states at different stages: Initial state uses a spinner when retrieving initial data to prevent users from seeing an empty list; Initial skeleton state uses a skeleton loader when retrieving initial data; Searching/Filtering state maintains current selections and uses a minimal loading state to indicate ongoing activity when users search for new items.

Select panel current selection display

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.

Select panel error handling

When default values fail to load, display an error placeholder to inform the user. When users search for new values and the search fails, display an error message above the input with a warning icon.

Select panel activation triggers

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

Select panel focus behavior

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.

Select panel closing and changes application

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

Select panel keyboard navigation

Tab moves focus forward between interactive controls and widgets within the dialog. Shift+Tab moves focus backward. Enter selects items in the list or activates buttons or links. Space types a space in the input or activates buttons or links. ArrowDown navigates forward through items; if on the last item, it moves to the first item. ArrowUp navigates backward; if on the first item, it moves to the last item. Home moves focus to the first item. PageUp moves focus to the first item. End moves focus to the last item. PageDown moves focus to the last item. Esc applies changes and closes the select panel.

Give your agent this brain