Interactions

Utilities for controlling text selection behavior and pointer event handling.

@layer utilities

Text selection

User-select utilities set the CSS user-select property, controlling how text within an element responds to pointer selection.

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

This paragraph has default select behavior.

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

<p class="user-select-all">This paragraph will be entirely selected when clicked by the user.</p>
<p class="user-select-auto">This paragraph has default select behavior.</p>
<p class="user-select-none">This paragraph will not be selectable when clicked by the user.</p>

Pointer events

Pointer event utilities set the CSS pointer-events property. .pointer-event-none disables mouse, stylus, and touch interactions. .pointer-event-auto restores the default behavior, or overrides an inherited disabled state.

This link can not be clicked.

This link can be clicked (this is default behavior).

This link can not be clicked because the pointer-events property is inherited from its parent. However, this link has a pointer-event-auto class and can be clicked.

<p><a href="#" class="pointer-event-none" tabindex="-1" aria-disabled="true">This link</a> can not be clicked.</p>
<p><a href="#" class="pointer-event-auto">This link</a> can be clicked (this is default behavior).</p>
<p class="pointer-event-none"><a href="#" tabindex="-1" aria-disabled="true">This link</a> can not be clicked because the <code>pointer-events</code> property is inherited from its parent. However, <a href="#" class="pointer-event-auto">this link</a> has a <code>pointer-event-auto</code> class and can be clicked.</p>

.pointer-event-none affects only pointer-based interactions. Elements with this class remain focusable and actionable via keyboard unless additional attributes are applied: tabindex="-1" prevents keyboard focus, and aria-disabled="true" communicates the disabled state to assistive technologies.

Simpler alternatives for common cases:

For form inputs, add the disabled HTML attribute.
For links, remove the href attribute, making it a non-interactive anchor or placeholder link.

CSS

Interaction utilities are generated via the utilities API.

Reference

The table lists all interaction utilities and their CSS properties.

Class	Properties
`.user-select-all`	`-webkit-user-select: all; user-select: all;`
`.user-select-auto`	`-webkit-user-select: auto; user-select: auto;`
`.user-select-none`	`-webkit-user-select: none; user-select: none;`
`.pointer-event-none`	`pointer-events: none;`
`.pointer-event-auto`	`pointer-events: auto;`

Utilities API

Interaction utilities are declared in scss/utilities/_index.scss using the utilities API.

"user-select": (
  property: user-select,
  values: all auto none
),
"pointer-events": (
  property: pointer-events,
  class: pointer-event,
  values: none auto,
),