Interactivity
Atomic interactivity classes allow you to quickly change an element's interactivity.
Pointer events
The pointer-events CSS property enables or disables all mouse events on an element.
Classes
| Class | Output | Definition |
|---|---|---|
.pe-auto | pointer-events: auto; | The element behaves as it would if the pointer-events property were not specified. |
.pe-none | pointer-events: none; | Disables mouse events (clicking, dragging, hovering, etc.) on the element and its decendents. |
Examples
<div class="pe-auto">…</div>
<div class="pe-none">…</div>Focus
The focus utility classes allow you to apply custom focus styles to an element. Add the conditional prefix f: to only apply the style when the element is focused.
Classes
| Class | Definition |
|---|---|
.focus | The element will have the default Stacks focus style applied. |
.focus-inset | The element will have the inset Stacks focus style applied. |
.focus-bordered | The element will have the default Stacks focus style applied and match the border to the focus style. |
.focus-inset-bordered | The element will have the inset Stacks focus style applied and match the border to the focus style. |
Examples
<div class="focus">…</div>
<div class="focus-inset">…</div>
<div class="focus-bordered">…</div>
<div class="focus-inset-bordered">…</div>.focus
.focus-inset
.focus-bordered
.focus-inset-bordered
Conditional focus examples
Add the conditional prefix f: to only apply the style when the element is focused.
<div class="f:focus" role="button" tabindex="0">…</div>
<div class="f:focus-inset" role="button" tabindex="0">…</div>
<div class="f:focus-bordered" role="button" tabindex="0">…</div>
<div class="f:focus-inset-bordered" role="button" tabindex="0">…</div>.f:focus
.f:focus-inset
.f:focus-bordered
.f:focus-inset-bordered
User select
The user-select CSS property controls whether the user can select text.
Classes
| Class | Output | Definition |
|---|---|---|
.us-auto | user-select: auto; | The element behaves as it would if the user-select property were not specified. |
.us-none | user-select: none; | The text of the element and its sub-elements is not selectable. It may be appropriate to combine with `.c-default` |
Examples
<div class="us-auto">…</div>
<div class="us-none">…</div>.us-auto
.us-none