user-select.mdx

title	User select
description	Control how users can select text content with user-select utilities.
toc	true
mdn	https://developer.mozilla.org/en-US/docs/Web/CSS/user-select
utility	user-select

Overview

Change the way in which the content is selected when the user interacts with it using user-select utilities.

Basic usage

<Example code={`

This paragraph will be entirely selected when clicked by the user.

This paragraph has default select behavior.

This paragraph will only allow the text to be selected when clicked by the user, even if the CSS user-select property is set to something else.

This paragraph will not be selectable when clicked by the user.

`} />

Use cases

• .user-select-all - Useful for code snippets, IDs, or other content users might want to copy entirely
• .user-select-auto - Default browser behavior, allows normal text selection
• .user-select-text - Forces text to remain selectable, useful for overriding a user-select: none set by an ancestor
• .user-select-none - Prevents text selection, useful for UI elements, buttons, or decorative text

**Accessibility note:** Be careful when using `user-select: none` as it can interfere with assistive technologies and keyboard navigation. Ensure that important content remains accessible through other means.

CSS

Sass utilities API

User select utilities are declared in our utilities API in scss/_utilities.scss. Learn how to use the utilities API.