User Select

Utility	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.

Sphinx of black quartz, judge my vow.

<div class="bg-indigo-1 p-4 rad-1">
  <p class="bg-white fs-sm p-4 rad-1 ta-c tc-lead us-a">Sphinx of black quartz, judge my vow.</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.

Sphinx of black quartz, judge my vow.

<div class="bg-indigo-1 p-4 rad-1">
  <p class="bg-white fs-sm p-4 rad-1 ta-c tc-lead us-auto">Sphinx of black quartz, judge my vow.</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.

Sphinx of black quartz, judge my vow.

<div class="bg-indigo-1 p-4 rad-1">
  <p class="bg-white fs-sm p-4 rad-1 ta-c tc-lead tc-lead us-none">Sphinx of black quartz, judge my vow.</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.

Sphinx of black quartz, judge my vow.

<div class="bg-indigo-1 p-4 rad-1">
  <p class="bg-white fs-sm p-4 rad-1 ta-c tc-lead us-t">Sphinx of black quartz, judge my vow.</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>