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-11-4302-1254
<p class="mb-0">Licence key: <code class="select-all bg-surface-3 border rounded-md px-2 py-1">BRAND-NAME-11-4302-1254</code></p>2Prevent text selection
user-select-none stops text from being selected, for example on interface labels.
user-select-auto Reliable launch simple teamuser-select-all Secure community elegant teamuser-select-none Simple community secure idea<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 launch simple team
</div>
</div>
<div class="col-sm-4">
<div class="border rounded-lg p-2 select-all">
<code>user-select-all</code> Secure community elegant team
</div>
</div>
<div class="col-sm-4">
<div class="border rounded-lg p-2 select-none">
<code>user-select-none</code> Simple community secure idea
</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">WELCOME15</span>
<button type="button" class="btn btn-sm btn-success" data-demo-copy="WELCOME15"><i class="bi bi-clipboard" 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 practical routine makes projects moving forward on any device. This bright release shows the whole team on the same page without extra tools.
Continue reading<div class="relative border rounded-lg p-4 overflow-hidden" style="max-width:24rem">
<p class="small mb-1">A practical routine makes projects moving forward on any device. This bright release shows the whole team on the same page without extra tools.</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 |
|---|---|---|
| #TX-5422 | Apr 26, 2026 | $49.43 |
| #ORD-9528 | Aug 24, 2026 | $123.09 |
<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">#TX-5422</td>
<td>Apr 26, 2026</td>
<td class="text-end">$49.43</td>
</tr>
<tr>
<td class="select-all font-mono">#ORD-9528</td>
<td>Aug 24, 2026</td>
<td class="text-end">$123.09</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" 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" 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.
A secure idea gives time back in your day in just a few clicks. This smart update guides data easy to understand for teams of every size. A calm goal keeps results you can measure wherever you are.
<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">A secure idea gives time back in your day in just a few clicks. This smart update guides data easy to understand for teams of every size. A calm goal keeps results you can measure wherever you are.</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-11
<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-11</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">
Sofia Whitaker
</div>
<div class="text-muted">
QA Engineer
</div>
<div class="mt-2">
<i class="bi bi-envelope" aria-hidden="true"></i> <span class="select-all">sofia.varga@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>$27.88</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.
- Clean water
- Volunteer programs
- Food relief
<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>Clean water</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>Volunteer programs</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>Food relief</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>Lisbon</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="What's new in environment" 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>