User Select

Class	Properties
us-a	user-select: all;
us-auto	user-select: auto;
us-none	user-select: none;
us-t	user-select: text;

All

This example sets the user select to all. The us-a utility allows the user to select all text within the element when clicked or dragged over.

Try selecting the sentence to see how the text highlighting works.

The quick brown fox jumps over the lazy dog.

<div class="bg-l-indigo-6 p-4 rad-1">
  <p class="bg-white fs-sm p-4 rad-1 ta-c tc-lead us-a">The quick brown fox jumps over the lazy dog.</p>
</div>

Auto

This example sets the user select to auto. The us-auto utility allows the browser to determine the default selection behavior based on the element’s content.

Try selecting the sentence to see how the text highlighting works.

The quick brown fox jumps over the lazy dog.

<div class="bg-l-indigo-6 p-4 rad-1">
  <p class="bg-white fs-sm p-4 rad-1 ta-c tc-lead us-auto">The quick brown fox jumps over the lazy dog.</p>
</div>

None

This example sets the user select to none. The us-none utility prevents the user from selecting any text within the element.

Try selecting the sentence to see how the text highlighting works.

The quick brown fox jumps over the lazy dog.

<div class="bg-l-indigo-6 p-4 rad-1">
  <p class="bg-white fs-sm p-4 rad-1 ta-c tc-lead tc-lead us-none">The quick brown fox jumps over the lazy dog.</p>
</div>

Text

This example sets the user select to text. The us-t utility allows the user to select text within the element, enabling text selection while preventing selection of other elements.

Try selecting the sentence to see how the text highlighting works.

The quick brown fox jumps over the lazy dog.

<div class="bg-l-indigo-6 p-4 rad-1">
  <p class="bg-white fs-sm p-4 rad-1 ta-c tc-lead us-t">The quick brown fox jumps over the lazy dog.</p>
</div>

Conditional styles

Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.

Media modifiers

You can combine responsive breakpoints like sm:us-*,md:us-*, lg:us-*, and xxl:us-* allows targeting specific utilities in different viewports.

<div class="us-none md:us-auto ..."></div>

Hover modifiers

Alternatively, you can apply :hover by using h:us-* utility to override elements and change their values when hovering over them.

<div class="us-none h:us-auto ..."></div>