Form adorn

Icons and text inside a form control, next to the input.

Bootstrap’s form adorn docs describe the markup and CSS.

Example

bsFormAdorn goes on a <label> that looks like a form control and holds a bsFormControl="ghost" input. Clicking the icon or padding focuses the input, because the wrapper is its label. bsFormAdornIcon and bsFormAdornText set aria-hidden, so adornments don’t join the input’s name. Don’t put buttons inside the wrapper.

HTML

<label bsFormAdorn>
  <span bsFormAdornIcon>
    <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
      <path
        d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0" />
    </svg>
  </span>
  <input type="search" bsFormControl="ghost" placeholder="Search…" />
</label>

End position

Add end to show adornments after the input without changing the DOM order.

HTML

<label bsFormAdorn end>
  <span bsFormAdornIcon>
    <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
      <path
        d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1zm13 2.383-4.708 2.825L15 11.105zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741M1 11.105l4.708-2.897L1 5.383z" />
    </svg>
  </span>
  <input type="email" bsFormControl="ghost" placeholder="you@example.com" />
</label>

With form field

In a bsFormField, the bsFormLabel names the input and the bsFormText describes it. An element can have several labels, so the wrapper and the field label work together.

SearchSearch across all pages and posts.

Please enter a search term.

<div bsFormField>
  <label bsFormLabel>Search</label>
  <label bsFormAdorn>
    <span bsFormAdornIcon>
      <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
        <path
          d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0" />
      </svg>
    </span>
    <input type="search" bsFormControl="ghost" placeholder="Search…" [formControl]="query" />
  </label>
  <small bsFormText>Search across all pages and posts.</small>
  <div bsInvalidFeedback>Please enter a search term.</div>
</div>

Text adornments

Use bsFormAdornText for currency symbols, units or domains. Put anything meaningful in the visible label too, because adornments are hidden from screen readers.

Amount in dollars

Email username

HTML

<div class="vstack gap-3">
  <div bsFormField>
    <label bsFormLabel>Amount in dollars</label>
    <label bsFormAdorn>
      <span bsFormAdornText>$</span>
      <input bsFormControl="ghost" inputmode="decimal" placeholder="0.00" />
    </label>
  </div>
  <div bsFormField>
    <label bsFormLabel>Email username</label>
    <label bsFormAdorn end>
      <span bsFormAdornText>&#64;example.com</span>
      <input bsFormControl="ghost" placeholder="username" />
    </label>
  </div>
</div>

Sizing

Set size to sm or lg.

HTML

<div class="vstack gap-3">
  <label bsFormAdorn size="sm">
    <span bsFormAdornIcon>
      <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
        <path
          d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0" />
      </svg>
    </span>
    <input bsFormControl="ghost" placeholder="Small input" />
  </label>
  <label bsFormAdorn size="lg">
    <span bsFormAdornIcon>
      <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
        <path
          d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0" />
      </svg>
    </span>
    <input bsFormControl="ghost" placeholder="Large input" />
  </label>
</div>

API

BsFormAdorn

Selector: label[bsFormAdorn] · Exported as: bsFormAdorn

Inputs

Name	Type	Default	Description
`end`	`boolean`	`false`	Shows adornments after the input.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size of the wrapper.

BsFormAdornIcon

Selector: [bsFormAdornIcon]

BsFormAdornText

Selector: [bsFormAdornText]