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: UMBRA-1765-1634
<p class="mb-0">Licence key: <code class="select-all bg-surface-3 border rounded-md px-2 py-1">UMBRA-1765-1634</code></p>2Prevent text selection
user-select-none stops text from being selected, for example on interface labels.
user-select-auto Reliable plan calm teamuser-select-all Honest update flexible ideauser-select-none Calm update elegant update<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 plan calm team
</div>
</div>
<div class="col-sm-4">
<div class="border rounded-lg p-2 select-all">
<code>user-select-all</code> Honest update flexible idea
</div>
</div>
<div class="col-sm-4">
<div class="border rounded-lg p-2 select-none">
<code>user-select-none</code> Calm update elegant update
</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">WELCOME39</span>
<button type="button" class="btn btn-sm btn-success" data-demo-copy="WELCOME39"><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.
Modern equipment means faster diagnoses and more comfortable treatment. Book online in two minutes and see a doctor as soon as today.
Continue reading<div class="relative border rounded-lg p-4 overflow-hidden" style="max-width:24rem">
<p class="small mb-1">Modern equipment means faster diagnoses and more comfortable treatment. Book online in two minutes and see a doctor as soon as today.</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 |
|---|---|---|
| #INV-4905 | Dec 21, 2025 | $321.59 |
| #INV-8108 | Jan 11, 2026 | $109.51 |
<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">#INV-4905</td>
<td>Dec 21, 2025</td>
<td class="text-end">$321.59</td>
</tr>
<tr>
<td class="select-all font-mono">#INV-8108</td>
<td>Jan 11, 2026</td>
<td class="text-end">$109.51</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-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" 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.
Friendly reminders make sure you never miss a check-up or a dose. Video consultations let you speak with a doctor from the comfort of home. We listen first, then build a plan around what you actually need.
<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">Friendly reminders make sure you never miss a check-up or a dose. Video consultations let you speak with a doctor from the comfort of home. We listen first, then build a plan around what you actually need.</p>
</div>13Terminal command
The prompt sign has user-select-none, the command user-select-all: copying gives only the command.
$ npm install umbra
<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 umbra</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">
Ava Delgado
</div>
<div class="text-muted">
Customer Success
</div>
<div class="mt-2">
<i class="bi bi-envelope" aria-hidden="true"></i> <span class="select-all">leo.alvarez@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>$10.03</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.
- Lab tests
- Health check-ups
- Dental care
<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>Lab tests</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>Health check-ups</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>Dental care</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-1581056771107-24ca5f033842?auto=format&fit=crop&w=800&h=800&q=70" alt="Photo 1" width="90" height="90" class="rounded-lg object-cover block">
<figcaption>Edinburgh</figcaption>
</figure>
<figure class="mb-0 text-center small">
<img src="https://images.unsplash.com/photo-1584516150909-c43483ee7932?auto=format&fit=crop&w=800&h=800&q=70" alt="Photo 2" width="90" height="90" class="rounded-lg object-cover block">
<figcaption>Montreal</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 often should you have a health check-up?">
<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>