Interactions
Interaction utilities change how people interact with content. user-select-all, user-select-auto and user-select-none control text selection, while pe-none and pe-auto turn pointer events off and on. pe-none only affects the mouse, so also use tabindex="-1" and aria-disabled for disabled links.
1Select all on click
user-select-all selects the whole text with one click, handy for codes and keys.
Licence key: BRAND-NAME-20-7682-8489
<p class="mb-0">Licence key: <code class="select-all bg-surface-3 border rounded-md px-2 py-1">BRAND-NAME-20-7682-8489</code></p>2Prevent text selection
user-select-none stops text from being selected, for example on interface labels.
user-select-auto Reliable team powerful journeyuser-select-all Modern launch secure storyuser-select-none Reliable goal powerful community<div class="row g-2 small">
<div class="col-sm-4">
<div class="border rounded-lg p-2 select-auto">
<code>user-select-auto</code> Reliable team powerful journey
</div>
</div>
<div class="col-sm-4">
<div class="border rounded-lg p-2 select-all">
<code>user-select-all</code> Modern launch secure story
</div>
</div>
<div class="col-sm-4">
<div class="border rounded-lg p-2 select-none">
<code>user-select-none</code> Reliable goal powerful community
</div>
</div>
</div>3Disable clicks with pe-none
pe-none makes a link ignore the pointer; add aria-disabled and tabindex="-1" for keyboard users.
<div class="flex flex-wrap gap-4">
<a href="#" class="link-primary">Clickable link</a> <a href="#" class="link-primary pointer-events-none opacity-50" tabindex="-1" aria-disabled="true">pe-none link</a>
</div>4Re-enable on a child
pe-none on a parent and pe-auto on one child: only the child reacts.
This panel has pe-none, so its links do not react: ignored link.
<div class="pointer-events-none border rounded-lg p-4 bg-surface-3">
<p class="small mb-2">This panel has <code>pe-none</code>, so its links do not react: <a href="#" tabindex="-1">ignored link</a>.</p>
<a href="#" class="pointer-events-auto btn btn-sm btn-primary">pe-auto button</a>
</div>5Copy a coupon code
A user-select-all code next to a copy button.
<div class="flex items-center gap-2 border border-2 border-success rounded-lg p-2" style="max-width:20rem">
<span class="select-all font-bold font-mono grow text-center">SPRING15</span>
<button type="button" class="btn btn-sm btn-success" data-demo-copy="SPRING15"><i class="bi bi-clipboard-fill" aria-hidden="true"></i> Copy</button>
</div>6Click-through overlay
A decorative gradient overlay with pe-none lets clicks reach the link under it.
A focused update connects new ideas to life with friendly support. Our sponsorship guides results you can measure wherever you are.
Continue reading<div class="relative border rounded-lg p-4 overflow-hidden" style="max-width:24rem">
<p class="small mb-1">A focused update connects new ideas to life with friendly support. Our sponsorship guides results you can measure wherever you are.</p>
<a href="#" class="small">Continue reading</a>
<div class="absolute top-0 start-0 w-full h-full bg-primary/10 pointer-events-none">
</div>
</div>7Toolbar labels that do not select
user-select-none on a toolbar avoids accidental highlighting on double click.
<div class="flex gap-1 border rounded-lg p-1 select-none" role="toolbar" aria-label="Formatting">
<button type="button" class="btn btn-sm btn-light"><i class="bi bi-type-bold" aria-hidden="true"></i> Bold</button>
<button type="button" class="btn btn-sm btn-light"><i class="bi bi-type-italic" aria-hidden="true"></i> Italic</button>
<button type="button" class="btn btn-sm btn-light"><i class="bi bi-type-underline" aria-hidden="true"></i> Underline</button>
</div>8Select an order number
Order numbers in a table use user-select-all so they copy in one go.
| Order | Date | Total |
|---|---|---|
| #PO-4586 | Oct 26, 2025 | $132.04 |
| #PO-2366 | Dec 11, 2025 | $215.96 |
<table class="table table-sm small mb-0">
<thead>
<tr>
<th scope="col">Order</th>
<th scope="col">Date</th>
<th scope="col" class="text-end">Total</th>
</tr>
</thead>
<tbody>
<tr>
<td class="select-all font-mono">#PO-4586</td>
<td>Oct 26, 2025</td>
<td class="text-end">$132.04</td>
</tr>
<tr>
<td class="select-all font-mono">#PO-2366</td>
<td>Dec 11, 2025</td>
<td class="text-end">$215.96</td>
</tr>
</tbody>
</table>9Icon that never steals the click
pe-none on the icon inside a button makes sure the button is the click target.
<button type="button" class="btn btn-primary"><span class="pointer-events-none me-1"><i class="bi bi-cloud-arrow-up-fill" aria-hidden="true"></i></span>Upload files</button>10Read-only rating
Stars with pe-none show a score that cannot be changed.
<div class="flex items-center gap-2">
<div class="pointer-events-none text-warning text-lg" aria-label="4 out of 5 stars">
<i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i><i class="bi bi-star-fill" aria-hidden="true"></i>
</div>
<span class="small text-muted">Your rating is locked</span>
</div>11Locked wizard steps
Future steps get pe-none until the current one is complete.
<nav class="flex flex-wrap gap-2" aria-label="Steps">
<a href="#" class="btn btn-sm btn-success">1 Account</a> <a href="#" class="btn btn-sm btn-primary" aria-current="step">2 Profile</a> <a href="#" class="btn btn-sm btn-light border pointer-events-none opacity-50" tabindex="-1" aria-disabled="true">3 Billing</a> <a href="#" class="btn btn-sm btn-light border pointer-events-none opacity-50" tabindex="-1" aria-disabled="true">4 Done</a>
</nav>12Watermark that cannot be selected
pe-none and user-select-none on a watermark keep it out of the way.
Our ticketing lets the whole team on the same page on any device. A friendly story guides your work organised without the usual hassle. This bright story turns results you can measure from the very first day.
<div class="relative border rounded-lg p-6 overflow-hidden">
<span class="absolute top-1/2 start-1/2 -translate-x-1/2 -translate-y-1/2 text-4xl font-bold text-danger opacity-25 select-none pointer-events-none whitespace-nowrap" aria-hidden="true">DRAFT</span>
<p class="small mb-0 relative">Our ticketing lets the whole team on the same page on any device. A friendly story guides your work organised without the usual hassle. This bright story turns results you can measure from the very first day.</p>
</div>13Terminal command
The prompt sign has user-select-none, the command user-select-all: copying gives only the command.
$ npm install brand-name-20
<pre class="bg-dark text-white rounded-lg p-4 small mb-0"><span class="select-none text-white/50">$ </span><span class="select-all">npm install brand-name-20</span></pre>14Email to copy
user-select-all on an email address in a contact card.
<div class="border rounded-lg p-4 small" style="max-width:22rem">
<div class="font-semibold">
Aria Morgan
</div>
<div class="text-muted">
Sales Executive
</div>
<div class="mt-2">
<i class="bi bi-envelope-fill" aria-hidden="true"></i> <span class="select-all">noah.tanaka@example.com</span>
</div>
</div>15Unavailable plan
The sold out plan card is pe-none, the others stay clickable.
<div class="row g-2 small">
<div class="col-6">
<a href="#" class="block border rounded-lg p-4 no-underline link-body-emphasis"><strong>Monthly</strong><br>$28.54</a>
</div>
<div class="col-6">
<a href="#" class="block border rounded-lg p-4 no-underline link-body-emphasis pointer-events-none opacity-50" tabindex="-1" aria-disabled="true"><strong>Lifetime</strong><br>Sold out</a>
</div>
</div>16Drag handle
user-select-none on sortable rows so dragging does not highlight text.
- Networking app
- Sponsorship
- Sponsorship
<ul class="list-unstyled border rounded-lg mb-0 select-none" style="max-width:20rem">
<li class="flex items-center gap-2 px-4 py-2 border-b"><span class="text-muted/70"><i class="bi bi-grip-vertical" aria-hidden="true"></i></span>Networking app</li>
<li class="flex items-center gap-2 px-4 py-2 border-b"><span class="text-muted/70"><i class="bi bi-grip-vertical" aria-hidden="true"></i></span>Sponsorship</li>
<li class="flex items-center gap-2 px-4 py-2"><span class="text-muted/70"><i class="bi bi-grip-vertical" aria-hidden="true"></i></span>Sponsorship</li>
</ul>17Preview of a disabled slider
pe-none on a range input shows the value without allowing changes.
<div style="max-width:20rem">
<label class="form-label small" for="ut-vol-1251">Volume (locked)</label>
<input id="ut-vol-1251" type="range" class="form-range pointer-events-none" value="70" min="0" max="100" aria-disabled="true">
</div>18Selectable colour values
Colour tokens in a style guide use user-select-all for quick copying.
--wt-primary--wt-secondary--wt-surface<div class="flex flex-wrap gap-4 small">
<div class="flex items-center gap-2">
<span class="bg-primary rounded-md" style="width:24px;height:24px"></span><code class="select-all">--wt-primary</code>
</div>
<div class="flex items-center gap-2">
<span class="bg-secondary rounded-md" style="width:24px;height:24px"></span><code class="select-all">--wt-secondary</code>
</div>
<div class="flex items-center gap-2">
<span class="bg-surface-2 border rounded-md" style="width:24px;height:24px"></span><code class="select-all">--wt-surface</code>
</div>
</div>19Image that cannot be dragged into selection
user-select-none on a gallery strip keeps double clicks from selecting captions.
<div class="flex gap-2 select-none">
<figure class="mb-0 text-center small">
<img src="../assets/img/square-9.svg" alt="Photo 1" width="90" height="90" class="rounded-lg object-cover block">
<figcaption>Toronto</figcaption>
</figure>
<figure class="mb-0 text-center small">
<img src="../assets/img/square-10.svg" alt="Photo 2" width="90" height="90" class="rounded-lg object-cover block">
<figcaption>Porto</figcaption>
</figure>
</div>20Loading state on a form
While saving, the whole form gets pe-none and a reduced opacity.
<div class="pointer-events-none opacity-75 border rounded-lg p-4" style="max-width:22rem" aria-busy="true">
<label class="form-label small" for="ut-proj-1252">Project name</label>
<input id="ut-proj-1252" type="text" class="form-control mb-2" value="Secure ways to improve your dashboard" tabindex="-1">
<button type="button" class="btn btn-primary btn-sm" tabindex="-1"><span class="spinner-border spinner-border-sm me-1" aria-hidden="true"></span>Saving</button>
</div>