User Select

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

Limited availability

This feature does not work in some of the most widely-used browsers.

Chrome

Edge

Firefox

Safari

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.

Sphinx of black quartz, judge my vow.

<p class="fs-lg tc-slate us-auto">Sphinx of black quartz, judge my vow.</p>

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.

Sphinx of black quartz, judge my vow.

<p class="fs-lg tc-slate us-a">Sphinx of black quartz, judge my vow.</p>

None

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.

<p class="fs-lg tc-slate us-none">Sphinx of black quartz, judge my vow.</p>

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.

Sphinx of black quartz, judge my vow.

<p class="fs-lg tc-slate us-t">Sphinx of black quartz, judge my vow.</p>

Using utility variants

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

Targeting different viewports

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

Targeting hover states

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