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: MIRA-POINT-6174-4038
<p class="mb-0">Licence key: <code class="select-all bg-surface-3 border rounded-md px-2 py-1">MIRA-POINT-6174-4038</code></p>2Prevent text selection
user-select-none stops text from being selected, for example on interface labels.
user-select-auto Modern release bright goaluser-select-all Clear story powerful journeyuser-select-none Clear release reliable journey<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> Modern release bright goal
</div>
</div>
<div class="col-sm-4">
<div class="border rounded-lg p-2 select-all">
<code>user-select-all</code> Clear story powerful journey
</div>
</div>
<div class="col-sm-4">
<div class="border rounded-lg p-2 select-none">
<code>user-select-none</code> Clear release reliable journey
</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">SAVE34</span>
<button type="button" class="btn btn-sm btn-success" data-demo-copy="SAVE34"><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.
Not sure about the size? Our fit guide and live chat help you choose. Free shipping on orders over $50 and easy returns within 30 days.
Continue reading<div class="relative border rounded-lg p-4 overflow-hidden" style="max-width:24rem">
<p class="small mb-1">Not sure about the size? Our fit guide and live chat help you choose. Free shipping on orders over $50 and easy returns within 30 days.</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-1988 | Mar 20, 2026 | $63.25 |
| #TX-9693 | Sep 16, 2025 | $391.84 |
<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-1988</td>
<td>Mar 20, 2026</td>
<td class="text-end">$63.25</td>
</tr>
<tr>
<td class="select-all font-mono">#TX-9693</td>
<td>Sep 16, 2025</td>
<td class="text-end">$391.84</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-emphasis 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.
We measure success by how many shoppers come back and tell their friends. Friendly people answer your questions quickly, by phone, chat or email. Our packaging is plastic-free and every delivery is carbon-neutral.
<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-emphasis opacity-25 select-none pointer-events-none whitespace-nowrap" aria-hidden="true" inert>DRAFT</span>
<p class="small mb-0 relative">We measure success by how many shoppers come back and tell their friends. Friendly people answer your questions quickly, by phone, chat or email. Our packaging is plastic-free and every delivery is carbon-neutral.</p>
</div>13Terminal command
The prompt sign has user-select-none, the command user-select-all: copying gives only the command.
$ npm install mira-point
<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 mira-point</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">
Priya Carter
</div>
<div class="text-muted">
Customer Success
</div>
<div class="mt-2">
<i class="bi bi-envelope-fill" aria-hidden="true"></i> <span class="select-all">freya.quinn@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>$13.07</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.
- Loyalty rewards
- Loyalty rewards
- 30-day returns
<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-tertiary"><i class="bi bi-grip-vertical" aria-hidden="true"></i></span>Loyalty rewards</li>
<li class="flex items-center gap-2 px-4 py-2 border-b"><span class="text-tertiary"><i class="bi bi-grip-vertical" aria-hidden="true"></i></span>Loyalty rewards</li>
<li class="flex items-center gap-2 px-4 py-2"><span class="text-tertiary"><i class="bi bi-grip-vertical" aria-hidden="true"></i></span>30-day returns</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="https://images.unsplash.com/photo-1567401893414-76b7b1e5a7a5?auto=format&fit=crop&w=800&h=800&q=70" alt="Photo 1" width="90" height="90" class="rounded-lg object-cover block">
<figcaption>Vancouver</figcaption>
</figure>
<figure class="mb-0 text-center small">
<img src="https://images.unsplash.com/photo-1567958451986-2de427a4a0be?auto=format&fit=crop&w=800&h=800&q=70" alt="Photo 2" width="90" height="90" class="rounded-lg object-cover block">
<figcaption>Denver</figcaption>
</figure>
</div>20Loading state on a form
While saving, the form is disabled (a disabled fieldset) and 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">
<fieldset class="border-0 p-0 m-0" disabled>
<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="How we choose sustainable materials">
<button type="button" class="btn btn-primary btn-sm"><span class="spinner-border spinner-border-sm me-1" aria-hidden="true"></span>Saving</button>
</fieldset>
</div>