Input Adorn

Extend form inputs with assistive icons, text, and action buttons positioned before or after the input.

@layer components

Context tokens

Overview

The .form-input element acts as a flex container that positions .input-adorn elements before or after a .ghost-input input. The ghost input fills the available space while adornments shrink to their content.

See the Form Input documentation for more on the .form-input and .ghost-input classes.

Examples

The position of .input-adorn within the wrapper controls whether it appears at the start or end of the field.

Leading

Place .input-adorn as the first child of .form-input to position it at the leading edge.

<div class="form-input">
  <span class="input-adorn">
    <svg class="icon" aria-hidden="true"><use href="#search-outline"></use></svg>
  </span>
  <input type="text" class="ghost-input" aria-label="Search" placeholder="Search...">
</div>

Trailing

Place .input-adorn as the last child to position it at the trailing edge.

<div class="form-input">
  <input type="email" class="ghost-input" aria-label="Email address" placeholder="you@example.com">
  <span class="input-adorn">
    <svg class="icon" aria-hidden="true"><use href="#envelope-outline"></use></svg>
  </span>
</div>

Text adornments

Use .input-adorn for currency symbols, units, domain suffixes, and other text-based decorations. When the adornment is essential to understanding what the field expects, include it in the input's accessible name via aria-label.

USD

https://

@example.com

<div class="form-input">
  <span class="input-adorn">$</span>
  <input type="text" class="ghost-input" aria-label="Amount in dollars" placeholder="0.00">
</div>
<div class="form-input">
  <input type="text" class="ghost-input" aria-label="Amount" placeholder="Amount">
  <span class="input-adorn">USD</span>
</div>
<div class="form-input">
  <span class="input-adorn">https://</span>
  <input type="text" class="ghost-input" aria-label="Website URL" placeholder="example.com">
</div>
<div class="form-input">
  <input type="text" class="ghost-input" aria-label="Username" placeholder="username">
  <span class="input-adorn">@example.com</span>
</div>

Combined

Combine a leading and a trailing adornment for fields that need positional context on both edges.

@example.com

<div class="form-input">
  <span class="input-adorn">
    <svg class="icon" aria-hidden="true"><use href="#envelope-outline"></use></svg>
  </span>
  <input type="text" class="ghost-input" aria-label="Username" placeholder="Username">
  <span class="input-adorn">@example.com</span>
</div>

Layout

The .form-input wrapper's flex layout allows you to combine adornments with other form controls and arrange them in various configurations.

Label & help

Add a label outside the .form-input wrapper and associate help text with aria-describedby for complete form semantics:

Search across all pages and posts.

<label for="searchAssist" class="form-label">Search</label>
<div class="form-input">
  <span class="input-adorn">
    <svg class="icon" aria-hidden="true"><use href="#search-outline"></use></svg>
  </span>
  <input type="text" class="ghost-input" id="searchAssist" aria-describedby="searchAssistHelp" placeholder="Search...">
</div>
<div class="form-help" id="searchAssistHelp">Search across all pages and posts.</div>

In Form Field

Wrap .form-input in .form-field to integrate with labels, help text, and validation feedback.

Search across all pages and posts.

<div class="form-field">
  <label for="helpField" class="form-label">Search</label>
  <div class="form-input">
    <span class="input-adorn">
      <svg class="icon" aria-hidden="true"><use href="#search-outline"></use></svg>
    </span>
    <input type="text" class="ghost-input" id="helpField" aria-describedby="helpFieldHelp" placeholder="Search...">
  </div>
  <div class="form-help" id="helpFieldHelp">Search across all pages and posts.</div>
</div>

Sizing

Use .sm or .lg on the wrapper to adjust sizing.

@example.com

<div class="form-input sm">
  <span class="input-adorn">
    <svg class="icon" aria-hidden="true"><use href="#envelope-outline"></use></svg>
  </span>
  <input type="text" class="ghost-input" aria-label="Username" placeholder="Username">
  <span class="input-adorn">@example.com</span>
</div>
<div class="form-input">
  <span class="input-adorn">
    <svg class="icon" aria-hidden="true"><use href="#envelope-outline"></use></svg>
  </span>
  <input type="text" class="ghost-input" aria-label="Username" placeholder="Username">
  <span class="input-adorn">@example.com</span>
</div>
<div class="form-input lg">
  <span class="input-adorn">
    <svg class="icon" aria-hidden="true"><use href="#envelope-outline"></use></svg>
  </span>
  <input type="text" class="ghost-input" aria-label="Username" placeholder="Username">
  <span class="input-adorn">@example.com</span>
</div>

Actionable adornments

Use .input-adorn with a <button> element to create clickable adornments for actions like showing/hiding passwords, clearing input, or triggering searches. Actionable adornments receive interactive styles on hover and focus.

Forgot password?

<div class="form-input">
  <input type="password" autocomplete="current-password" class="ghost-input" aria-label="Password" placeholder="Password">
  <button type="button" class="button icon-only input-adorn" aria-label="Show password">
    <svg class="icon" aria-hidden="true"><use href="#eye-outline"></use></svg>
  </button>
</div>
<div class="form-input">
  <input type="password" autocomplete="current-password" class="ghost-input" aria-label="Password" placeholder="Password">
  <a href="#" class="input-adorn">Forgot password?</a>
</div>

Accessibility

Input adornment introduces visual elements — icons, text, and buttons — that sit alongside the input but are separate from it in the DOM. Follow these practices to ensure assistive technologies can fully interpret the field.

Decorative icons

Icon adornments that provide a visual hint rather than essential information should have aria-hidden="true" on the <svg> element. The input's accessible name — provided by a <label> or aria-label — carries the full meaning independently.

<label for="searchInput" class="form-label">Search</label>
<div class="form-input">
  <span class="input-adorn">
    <svg class="icon" aria-hidden="true"><use href="#search-outline" /></svg>
  </span>
  <input type="text" class="ghost-input" id="searchInput" />
</div>

Text adornments

Text adornments like $, USD, or @example.com are not announced by screen readers. When the adornment is essential to understanding what the field expects, include it in the input's accessible name via aria-label.

<div class="form-input">
  <span class="input-adorn">$</span>
  <input type="text" class="ghost-input" aria-label="Amount in dollars" placeholder="0.00" />
</div>

Actionable adornments

Button adornments that contain only an icon have no text for screen readers to announce. Always add aria-label describing the action.

<div class="form-input">
  <input type="password" autocomplete="current-password" class="ghost-input" aria-label="Password" placeholder="Password">
  <button type="button" class="button icon-only input-adorn" aria-label="Show password">
    <svg class="icon" aria-hidden="true"><use href="#eye-outline" /></svg>
  </button>
</div>

For more detailed accessibility guidance, see the forms overview accessibility section.

CSS

The Input Adornments component can be customized at both runtime (via custom properties) and compile time (via Sass variables).

See the overview page for CSS and Sass variables shared by all form elements.