Adaptive Select
The adaptive select provides a touch-friendly alternative to HTML selects, checkboxes, and radio buttons on small screens and slide out panels. It has two parts: a menu trigger and a select list (single or multi) embedded in a slide out panel.

Common Characteristics

The menu trigger is always 48px tall with a white background. Width varies with breakpoint or container (e.g. a card or slide out). Each selector in the select list is 48px tall with a white background. The select list always appears in a slide out. The slide out width can be determined by the designer to suit the needs of the content.

Options

Icons and Chips

The menu trigger can have an optional icon to the left of the label. Selectors can appear with filter counts on light chips.

Multi-Select

The adaptive select can be used for single select or multi-select. The multi-select option includes a “Select all” toggle and a “Done” function that submits selections.

STYLE

Selector with icons