User Select

Utilities for controlling whether the user can select text in an element.

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

Disable selecting text

Use .user-select-none to prevent selecting text in an element and its children.

This text is not selectable

Allow selecting text

Use .user-select-text to allow selecting text in an element and its children.

This text is selectable

Select all text in one click

Use .user-select-all to automatically select all the text in an element when a user clicks.

Click anywhere in this text to select it all

Auto

Use .user-select-auto to use the default browser behavior for selecting text.

This text is selectable

Variants

By default, only responsive variants are generated for this utility. You can control which variants are generated by modifying the $utility-configuration in _settings.scss.