Skip to content

SelectPanel #1071

Closed
Closed
@smockle

Description

@smockle

Requires #1070

Description

SelectPanels are used to select one or more values from a list presented in a Popover. Unlike DropdownMenu, SelectPanels can be used for infinite-scrolling lists and for lists containing arbitrarily-many user-provided list items.

SelectPanels must be positioned beside their Source.

SelectPanels always contain a search field. If a search field is not required, DropdownMenu may be a more-suitable component.

Resources

Figma:
Prototype:

Screenshots

selectpanel-single-simple
selectpanel-single-complex
selectpanel-multi

Components

SelectPanel

Behaviors

A SelectPanel component renders an ActionList (role="listbox") containing DropdownMenuListItems (role="option") into a closable Popover, below a filter input (role="combobox").

note: A set of attributes, e.g. aria-expanded, aria-owns, aria-haspopup, aria-autocomplete, aria-controls, aria-activedescendant should be applied (by the component internally, not by library consumers) to the appropriate components.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions