React User select Utilities

User select

Change the way in which the content is selected when the user interacts with it.

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

On this page

Text selection

Change the way in which the content is selected when the user interacts with it.

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

This paragraph has default select behavior.

This paragraph is selectable even where an ancestor disables selection.

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

<p className="user-select-all">This paragraph will be entirely selected when clicked by the user.</p>
<p className="user-select-auto">This paragraph has default select behavior.</p>
<p className="user-select-text">This paragraph is selectable even where an ancestor disables selection.</p>
<p className="user-select-none">This paragraph will not be selectable when clicked by the user.</p>

<p className="user-select-all">This paragraph will be entirely selected when clicked by the user.</p>
<p className="user-select-auto">This paragraph has default select behavior.</p>
<p className="user-select-text">This paragraph is selectable even where an ancestor disables selection.</p>
<p className="user-select-none">This paragraph will not be selectable when clicked by the user.</p>

.user-select-none hides the text from the selection, not from the accessibility tree — a screen reader still reads it, and it is still copied when the user selects a surrounding block in some browsers. Use it for decorative or duplicated text, not to protect content.

Customizing

Sass variables

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 text none
),