SelectPanel

The SelectPanel 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.

Page navigation navigation

This documentation is in progress. Please check back for updates as we continue to iterate. We recommend using the default SelectPanel component in your project.

Anatomy

A SelectPanel with a title, input field, and values beneath that can be selected.

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

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

Options

Single Selection

Select panel titled Change author with a search bar and a list of names.

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

Select labels select panel showing various labels including a11y design (checked), a11y sign-off, accessibility, area: accessibility, at risk, and blocked with a search bar

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.

Select panel with a footer that includes a View All link

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

Opening

Select panel showing a list of users with checkboxes and names

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).

Best practices

Current Selection

Select panel showing the first item selected by default

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

Select panel with error state that says 'Failed to load results' with a link to try again

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.