Checkboxes indicate completion, such as checking items off a list.
Text selection is indicated by highlighting a segment of text.
Item selection
Text selection
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, or custom analogs, should only be used to indicate completion, such as checking items off lists.
Checkbox behaviors:
Avoid persistently displaying checkboxes as part of each item.
Item selection allows users to apply actions to selected items.
On touch devices, select an item by pressing and holding it.
To exit selection mode, deselect all items or perform an action on selected items using the toolbar.
On touch devices, select an item by pressing and holding it.
To toggle an item between selected and unselected states, tap the item.
To select multiple items, long press and drag the cursor.
Once an item is selected, tap the item to toggle its selection.
Users may long press and drag to select items using the cursor.
Desktop
To toggle selection on desktop, hover over an item to reveal a check mark which can be clicked.
On desktop, users may click and drag across checkboxes to select multiple items.
To indicate that an item is selected, display a check mark and scrim overlapping the item, or its associated avatar.
Checkmarks replace icons or avatars if there is space.
Use compact checkmarks to minimize the hiding the amount of content displayed.
.
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.
The user may adjust which text is selected by:
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.
Example of text selection handles
Example of text selection handles
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.
Text selection can be customized using your palette accent color.
Text selection – Light theme
Text selection – Dark theme
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.
More
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 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