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: NIMBUSAN-5067-5599

<p class="mb-0">Licence key: <code class="user-select-all bg-body-tertiary border rounded-2 px-2 py-1">NIMBUSAN-5067-5599</code></p>

2Prevent text selection

user-select-none stops text from being selected, for example on interface labels.

user-select-auto Calm experience fast community

user-select-all Bright workflow calm dashboard

user-select-none Practical launch friendly goal

<div class="row g-2 small">
  <div class="col-sm-4">
    <div class="border rounded-3 p-2 user-select-auto">
      <code>user-select-auto</code> Calm experience fast community
    </div>
  </div>
  <div class="col-sm-4">
    <div class="border rounded-3 p-2 user-select-all">
      <code>user-select-all</code> Bright workflow calm dashboard
    </div>
  </div>
  <div class="col-sm-4">
    <div class="border rounded-3 p-2 user-select-none">
      <code>user-select-none</code> Practical launch friendly goal
    </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.

Clickable link pe-none link

<div class="d-flex flex-wrap gap-3">
  <a href="#" class="link-primary">Clickable link</a> <a href="#" class="link-primary pe-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.

pe-auto button

<div class="pe-none border rounded-3 p-3 bg-body-tertiary">
  <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="pe-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.

VIP21

<div class="d-flex align-items-center gap-2 border border-2 border-success rounded-3 p-2" style="max-width:20rem">
  <span class="user-select-all fw-bold font-monospace flex-grow-1 text-center">VIP21</span> 
  <button type="button" class="btn btn-sm btn-success" data-demo-copy="VIP21"><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.

Websites we build are fast, accessible and easy for your team to update. We listen first, then build a plan around what you actually need.

<div class="position-relative border rounded-3 p-3 overflow-hidden" style="max-width:24rem">
  <p class="small mb-1">Websites we build are fast, accessible and easy for your team to update. We listen first, then build a plan around what you actually need.</p>
  <a href="#" class="small">Continue reading</a> 
  <div class="position-absolute top-0 start-0 w-100 h-100 bg-primary bg-opacity-10 pe-none">
  </div>
</div>

7Toolbar labels that do not select

user-select-none on a toolbar avoids accidental highlighting on double click.

<div class="d-flex gap-1 border rounded-3 p-1 user-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-2234	Mar 9, 2026	$327.10
#PO-9679	Nov 21, 2025	$65.08

<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="user-select-all font-monospace">#PO-2234</td>
      <td>Mar 9, 2026</td>
      <td class="text-end">$327.10</td>
    </tr>
    <tr>
      <td class="user-select-all font-monospace">#PO-9679</td>
      <td>Nov 21, 2025</td>
      <td class="text-end">$65.08</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="pe-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.

Your rating is locked

<div class="d-flex align-items-center gap-2">
  <div class="pe-none text-warning fs-5" 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-body-secondary">Your rating is locked</span> 
</div>

11Locked wizard steps

Future steps get pe-none until the current one is complete.

<nav class="d-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 pe-none opacity-50" tabindex="-1" aria-disabled="true">3 Billing</a> <a href="#" class="btn btn-sm btn-light border pe-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.

Clients stay with us for years because we treat their brand like our own. We measure success by how many clients come back and tell their friends. Clear prices, honest advice and no surprises along the way.

<div class="position-relative border rounded-3 p-4 overflow-hidden">
  <span class="position-absolute top-50 start-50 translate-middle fs-1 fw-bold text-danger opacity-25 user-select-none pe-none text-nowrap" aria-hidden="true" inert>DRAFT</span> 
  <p class="small mb-0 position-relative">Clients stay with us for years because we treat their brand like our own. We measure success by how many clients come back and tell their friends. Clear prices, honest advice and no surprises along the way.</p>
</div>

13Terminal command

The prompt sign has user-select-none, the command user-select-all: copying gives only the command.

$ npm install nimbusan

<pre v-pre class="bg-dark text-white rounded-3 p-3 small mb-0"><span class="user-select-none text-white-50">$ </span><span class="user-select-all">npm install nimbusan</span></pre>

14Email to copy

user-select-all on an email address in a contact card.

Arjun Fischer

Data Analyst

amara.silva@example.com

<div class="border rounded-3 p-3 small" style="max-width:22rem">
  <div class="fw-semibold">
    Arjun Fischer
  </div>
  <div class="text-body-secondary">
    Data Analyst
  </div>
  <div class="mt-2">
    <i class="bi bi-envelope" aria-hidden="true"></i> <span class="user-select-all">amara.silva@example.com</span>
  </div>
</div>

15Unavailable plan

The sold out plan card is pe-none, the others stay clickable.

Monthly
$9.20

Lifetime
Sold out

<div class="row g-2 small">
  <div class="col-6">
    <a href="#" class="d-block border rounded-3 p-3 text-decoration-none link-body-emphasis"><strong>Monthly</strong><br>$9.20</a>
  </div>
  <div class="col-6">
    <a href="#" class="d-block border rounded-3 p-3 text-decoration-none link-body-emphasis pe-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.

Content strategy
UX research
Campaign production

<ul class="list-unstyled border rounded-3 mb-0 user-select-none" style="max-width:20rem">
  <li class="d-flex align-items-center gap-2 px-3 py-2 border-bottom"><span class="text-body-tertiary"><i class="bi bi-grip-vertical" aria-hidden="true"></i></span>Content strategy</li>
  <li class="d-flex align-items-center gap-2 px-3 py-2 border-bottom"><span class="text-body-tertiary"><i class="bi bi-grip-vertical" aria-hidden="true"></i></span>UX research</li>
  <li class="d-flex align-items-center gap-2 px-3 py-2"><span class="text-body-tertiary"><i class="bi bi-grip-vertical" aria-hidden="true"></i></span>Campaign production</li>
</ul>

17Preview of a disabled slider

pe-none on a range input shows the value without allowing changes.

Volume (locked)

<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 pe-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="d-flex flex-wrap gap-3 small">
  <div class="d-flex align-items-center gap-2">
    <span class="bg-primary rounded-2" style="width:24px;height:24px"></span><code class="user-select-all">--wt-primary</code>
  </div>
  <div class="d-flex align-items-center gap-2">
    <span class="bg-secondary rounded-2" style="width:24px;height:24px"></span><code class="user-select-all">--wt-secondary</code>
  </div>
  <div class="d-flex align-items-center gap-2">
    <span class="bg-body-secondary border rounded-2" style="width:24px;height:24px"></span><code class="user-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="d-flex gap-2 user-select-none">
  <figure class="mb-0 text-center small">
    <img src="https://images.unsplash.com/photo-1777923311853-d14b7beb9fec?auto=format&fit=crop&w=800&h=800&q=70" alt="Photo 1" width="90" height="90" class="rounded-3 object-fit-cover d-block">
    <figcaption>Cape Town</figcaption>
  </figure>
  <figure class="mb-0 text-center small">
    <img src="https://images.unsplash.com/photo-1787647559705-d2ad3322020e?auto=format&fit=crop&w=800&h=800&q=70" alt="Photo 2" width="90" height="90" class="rounded-3 object-fit-cover d-block">
    <figcaption>Porto</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.

Project name

<div class="pe-none opacity-75 border rounded-3 p-3" 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="The small habits that make a big difference"> 
    <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>