User Select

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

Contents

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

Quick reference

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

Basic examples

Disabling text selection

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

The quick brown fox jumps over the lazy dog.

<div class="user-select-none">The quick brown fox jumps over the lazy dog.</div>

Try selecting the text to see the expected behaviour

Selecting all text in one click

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

The quick brown fox jumps over the lazy dog.

<div class="user-select-all">The quick brown fox jumps over the lazy dog.</div>

Try selecting the text to see the expected behaviour

Using auto select behaviour

Use user-select-auto to use the default browser behavior for selecting text. Useful for undoing other classes like .user-select-none at different breakpoints.

The quick brown fox jumps over the lazy dog.

<div class="user-select-auto">The quick brown fox jumps over the lazy dog.</div>

Try selecting the text to see the expected behaviour