Patterns - Selection

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

Text selection - light 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.