Patterns chevron_right Selection


Selection involves both the gestures and visual cues that allow users to make choices.

The global gesture to select data is a long-press, a 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, or custom analogs, should not be used for selection on mobile. They should only be used for contexts in which checking an item indicates completion, such as task lists or checklists, rather than selection.

Checkboxes may be used on desktop with the following guidelines:

  • Avoid persistently displaying checkboxes as part of each item.
  • When hovering on an item, display a single checkbox for that item.
  • After an item has been selected, display checkboxes for all remaining items in that set.

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


  • 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 the bounds of the selected text.

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

Text selection must occur in one contiguous block. However, the bounds of the selection may be altered through user action:

  • Dragging the initial selection to expand the selection
  • Dragging either of the selection handles to expand or reduce the selection
  • Touching (or clicking) repeatedly within the selection to expand it (single word > paragraph > all)
  • Keyboard shortcuts (see table)

Keyboard shortcut


Shift+Left/Right Arrow

Character-by-character selection

Shift+Up/Down Arrow

Line-by-line selection


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

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.


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 text right padding: 16dp
Dropdown menu space between menu text items: 32dp
Selected text top padding: 8dp
Expansion icon top and bottom padding: 10dp
Text selection handles: 22 x 22 dp