Form adorn · Modus Bootstrap v6.0

How it works

Apply both .form-control and .form-adorn to a wrapper element. .form-control provides the border, background, padding, and focus states; .form-adorn uses flexbox to position adornments alongside a "ghost input," a form control that has virtually no visual styling. The .form-ghost input inside is transparent and inherits styles from the wrapper.

See the form control documentation for more information on the .form-control and .form-ghost classes.

Example

Wrap an icon and a .form-ghost input inside a <div> with .form-control and .form-adorn. Place the adornment before the input in the DOM for start position (left in LTR).

HTML

<div class="form-control form-adorn">
  <div class="form-adorn-icon">
    <svg class="bi" width="16" height="16"><use href="#search" /></svg>
  </div>
  <input type="search" class="form-ghost" placeholder="Search...">
</div>

Use .form-adorn-end to position the adornment on the trailing side (keeps DOM order, uses CSS to flip visually):

HTML

<div class="form-control form-adorn form-adorn-end">
  <div class="form-adorn-icon">
    <svg class="bi" width="16" height="16"><use href="#envelope" /></svg>
  </div>
  <input type="email" class="form-ghost" placeholder="you@example.com">
</div>

With labels

Add a label outside the .form-adorn wrapper for proper form semantics:

Email address

HTML

<div>
  <label for="searchInput" class="form-label">Search</label>
  <div class="form-control form-adorn">
    <div class="form-adorn-icon">
      <svg class="bi" width="16" height="16"><use href="#search" /></svg>
    </div>
    <input type="search" class="form-ghost" id="searchInput" placeholder="Search...">
  </div>
</div>
<div>
  <label for="emailInput" class="form-label">Email address</label>
  <div class="form-control form-adorn form-adorn-end">
    <div class="form-adorn-icon">
      <svg class="bi" width="16" height="16"><use href="#envelope" /></svg>
    </div>
    <input type="email" class="form-ghost" id="emailInput" placeholder="you@example.com">
  </div>
</div>

With form field

Wrap a .form-adorn in a .form-field to pair it with a label and description text.

Search across all pages and posts.

HTML

<div class="form-field">
  <label for="adornField" class="form-label">Search</label>
  <div class="form-control form-adorn">
    <div class="form-adorn-icon">
      <svg class="bi" width="16" height="16"><use href="#search" /></svg>
    </div>
    <input type="search" class="form-ghost" id="adornField" placeholder="Search...">
  </div>
  <small class="form-text">Search across all pages and posts.</small>
</div>

Text adornments

Use .form-adorn-text for currency symbols, units, domain suffixes, and other text-based adornments. Text adornments auto-size to their content.

USD

https://

@example.com

HTML

<div class="form-control form-adorn">
  <span class="form-adorn-text">$</span>
  <input type="text" class="form-ghost" placeholder="0.00">
</div>
<div class="form-control form-adorn form-adorn-end">
  <span class="form-adorn-text">USD</span>
  <input type="text" class="form-ghost" placeholder="Amount">
</div>
<div class="form-control form-adorn">
  <span class="form-adorn-text">https://</span>
  <input type="text" class="form-ghost" placeholder="example.com">
</div>
<div class="form-control form-adorn form-adorn-end">
  <span class="form-adorn-text">@example.com</span>
  <input type="text" class="form-ghost" placeholder="username">
</div>

Sizing

Use .form-adorn-sm or .form-adorn-lg on the wrapper to adjust sizing.

HTML

<div class="form-control form-control-sm form-adorn">
  <div class="form-adorn-icon">
    <svg class="bi" width="16" height="16"><use href="#search" /></svg>
  </div>
  <input type="text" class="form-ghost" placeholder="Small input">
</div>
<div class="form-control form-adorn">
  <div class="form-adorn-icon">
    <svg class="bi" width="16" height="16"><use href="#search" /></svg>
  </div>
  <input type="text" class="form-ghost" placeholder="Default input">
</div>
<div class="form-control form-control-lg form-adorn">
  <div class="form-adorn-icon">
    <svg class="bi" width="16" height="16"><use href="#search" /></svg>
  </div>
  <input type="text" class="form-ghost" placeholder="Large input">
</div>

CSS

Variables

scss/forms/_form-adorn.scss

// stylelint-disable-next-line scss/dollar-variable-default
$form-adorn-tokens: defaults(
  (
    --form-adorn-gap: .375rem,
    --form-adorn-icon-size: 1rem,
    --form-adorn-icon-color: var(--fg-2),
  ),
  $form-adorn-tokens
);