User select

Class	Styles
.user-select-all	-webkit-user-select: all; user-select: all;
.user-select-auto	-webkit-user-select: auto; user-select: auto;
.user-select-none	-webkit-user-select: none; user-select: none;

Overview

Change the way in which the content is selected when the user interacts with it using user-select utilities.

Basic usage

This paragraph will be entirely selected when clicked by the user.

This paragraph has default select behavior.

This paragraph will not be selectable when clicked by the user.

HTML

<p class="user-select-all">This paragraph will be entirely selected when clicked by the user.</p>
<p class="user-select-auto">This paragraph has default select behavior.</p>
<p class="user-select-none">This paragraph will not be selectable when clicked by the user.</p>

Use cases

.user-select-all - Useful for code snippets, IDs, or other content users might want to copy entirely
.user-select-auto - Default browser behavior, allows normal text selection
.user-select-none - Prevents text selection, useful for UI elements, buttons, or decorative text

Accessibility note: Be careful when using user-select: none as it can interfere with assistive technologies and keyboard navigation. Ensure that important content remains accessible through other means.

CSS

Sass utilities API

User select utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.

SCSS

"user-select": (
  property: user-select,
  values: all auto none
),