User Select

Controls the ability of the user to select text in an element.

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

Auto

Initial value

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.

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

All

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.

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

None

Prevents the user from selecting any text within the element.

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

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

Text

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.

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

Using utility variants

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

Using media queries

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

Using hover states

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