Skip to content

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

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

Item selection allows users to apply actions to selected items.

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

Toggling selection on and off :

  • To toggle an item between selected and unselected states, tap the item.
  • To select multiple items, long press and drag the cursor.

Desktop

To toggle selection on desktop, hover over an item to reveal a check mark which can be clicked.

Indicating selection

To indicate that an item is selected, display a check mark and scrim overlapping the item, or its associated avatar.

Text selection

  • 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 shortcut.

Text selection handles

Color and contrast:

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

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

TO VIew other text selection behaviour Click Here.