Patterns Selection

Selection

Selection enables user choices through gestures and visual cues.

Checkboxes indicate completion, such as checking items off a list.

Text selection is indicated by highlighting a segment of text.

Types of selection

Item selection
Text selection

Selection gestures

  • A long-press, touch, or mousedown that’s held in the same position for a moment
  • A two-finger touch (touch devices only)

Usage Expand and collapse content An arrow that points down when collapsed and points up when expanded.

The selection gesture

The global gesture to select data is a long-press, touch, or mousedown that’s held in the same position for a moment. A two-finger touch may also trigger selection on touch devices.

Checkboxes (Recommended for desktop)

Checkboxes, or custom analogs, should only be used to indicate completion, such as checking items off lists.

Checkbox behaviors:

  • When hovering over an item, display a single checkbox for that item.
  • After an item is selected, display checkboxes for all remaining items in that set.

Avoid persistently displaying checkboxes as part of each item.

Item selection Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Support for multi-selection is strongly recommended for list and grid containers. This does not apply to actions available for a single selection (like a list of phone numbers, where calling is the only action), or if the context requires single-item manipulation (like moving icons on Android’s home screen).

Gestures:

  • When initiating selection, both long-press and two-finger touch may be extended using a drag gesture to select multiple items. Items between the beginning and end points of the drag will be included in the selection.
  • On desktop, a drag originating outside the bounds of all items may initiate multi-selection (for example, beginning a drag in the left margin of a list, and extending down and to the right to select list items).

Once an initial selection is made, it can be altered through user actions:

  • Touch a selected item to deselect it. Touch an unselected item to select it.
  • Shift+touch/click on an item to select all items between two selected points.

Text selection Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Text selection is indicated by highlighting a contiguous segment of text.

On mobile, a selection handle is added to both the beginning and end of a selection. Actions related to the text appear in a dropdown menu positioned immediately above, but not overlapping, the selection.

Adjusting selected text

The user may adjust which text is selected by:

  • Dragging the initial selection to expand it
  • Dragging either of the selection handles to expand or reduce the selection
  • Touching (or clicking) repeatedly within the selection to expand it (Selection will toggle between a single word, paragraph, or all text)
  • Keyboard shortcuts (see table)

Keyboard shortcut

Result

Shift+Left/Right Arrow

Character-by-character selection

Shift+Up/Down Arrow

Line-by-line selection

Ctrl/Command+A

Select all

Text selection keyboard shortcuts can be used to alter the selection bounds.

Text selection handles

Example of text selection handles

Example of text selection handles

Color and contrast

Text selection elements may reflect your color palette by using your accent color.

Selected text should be legible, with noticeable contrast against its background color. Alternatively, selected text may be indicated by displaying outlines, text treatments, motion, or checkmark icons.  

Learn more about contrast (or try a color contrast analyzer) at webaim.org.

  1. Text selection color
  2. Text
  3. Background

Text selection can be customized using your palette accent color.

Text selection – Light theme

Text selection – Light theme

Text selection – Dark theme

Text selection – Dark theme

Text selection toolbar

The floating toolbar appears above the selection area with primary actions of Cut, Copy, Paste, and More. When the user selects the More icon, the toolbar collapses and transforms into a secondary menu to reveal additional actions.

The font for the floating toolbar text is Roboto Medium 14sp, all caps.

Dropdown menus for Cut, Copy, Paste, and More appear above the selection area.

When the user selects More, the menu begins transitioning to show the overflow items.

More

Overflow menu items: Share, Search, and Translate

Text selection

Dropdown menu height: 44dp
Dropdown menu text top padding: 12dp
Dropdown menu text top padding: 14dp
Dropdown menu text left padding: 24dp

Dropdown menu space between menu text items: 32dp
Selected text top padding: 8dp

Expansion icon right padding: 16dp

Expansion icon left padding: 22dp
Expansion icon top and bottom padding: 10dp
Text selection handles: 22 x 22 dp