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: OPAL-2859-4121

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

2Prevent text selection

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

user-select-auto Powerful community calm workflow

user-select-all Fast release bright journey

user-select-none Clear plan simple community

<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> Powerful community calm workflow
    </div>
  </div>
  <div class="col-sm-4">
    <div class="border rounded-3 p-2 user-select-all">
      <code>user-select-all</code> Fast release bright journey
    </div>
  </div>
  <div class="col-sm-4">
    <div class="border rounded-3 p-2 user-select-none">
      <code>user-select-none</code> Clear plan simple 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.

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.

WELCOME19

<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">WELCOME19</span> 
  <button type="button" class="btn btn-sm btn-success" data-demo-copy="WELCOME19"><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.

Three days of keynotes, hands-on workshops and evening meetups. Every detail is handled by people who care about getting it right.

<div class="position-relative border rounded-3 p-3 overflow-hidden" style="max-width:24rem">
  <p class="small mb-1">Three days of keynotes, hands-on workshops and evening meetups. Every detail is handled by people who care about getting it right.</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
#TX-1528	Sep 3, 2026	$48.39
#ORD-6619	Jan 7, 2026	$165.16

<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">#TX-1528</td>
      <td>Sep 3, 2026</td>
      <td class="text-end">$48.39</td>
    </tr>
    <tr>
      <td class="user-select-all font-monospace">#ORD-6619</td>
      <td>Jan 7, 2026</td>
      <td class="text-end">$165.16</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.

Start in minutes and get help from a real person whenever you need it. Group tickets include a private meeting room for your team. Workshops are limited to thirty seats, so everyone gets hands-on time.

<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">Start in minutes and get help from a real person whenever you need it. Group tickets include a private meeting room for your team. Workshops are limited to thirty seats, so everyone gets hands-on time.</p>
</div>

13Terminal command

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

$ npm install opal

<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 opal</span></pre>

14Email to copy

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

Ravi Nguyen

Operations Manager

nadia.ortega@example.com

<div class="border rounded-3 p-3 small" style="max-width:22rem">
  <div class="fw-semibold">
    Ravi Nguyen
  </div>
  <div class="text-body-secondary">
    Operations Manager
  </div>
  <div class="mt-2">
    <i class="bi bi-envelope" aria-hidden="true"></i> <span class="user-select-all">nadia.ortega@example.com</span>
  </div>
</div>

15Unavailable plan

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

Monthly
$9.68

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.68</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.

Speaker management
Networking app
Venue booking

<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>Speaker management</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>Networking app</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>Venue booking</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-1769755409781-9e8924c57362?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>Seoul</figcaption>
  </figure>
  <figure class="mb-0 text-center small">
    <img src="https://images.unsplash.com/photo-1769798643655-e0f10f62c3fd?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>Kyoto</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="How to get the most out of a conference"> 
    <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>