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 class 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 class 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 class 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 class 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>

---

Utilizing utilities conditionally

Override existing utilities based on the user's screen size or other factors, such as hover states. Learn more about modifiers in our documentation.

Responsive breakpoints

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>

Utilizing utilities conditionally

Override existing utilities based on the user's screen size or other factors, such as hover states. Learn more about modifiers in our documentation.

Hover states

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>