Interactivity

User Select

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

Basic usage

Disabling text selection

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

The quick brown fox jumps over the lazy dog.

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

Allowing text selection

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

The quick brown fox jumps over the lazy dog.

<div className="**select-text** ...">
  The quick brown fox jumps over the lazy dog.
</div>

Selecting all text in one click

Use 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 className="**select-all** ...">
  The quick brown fox jumps over the lazy dog.
</div>

Using auto select behaviour

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

The quick brown fox jumps over the lazy dog.

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