Skip to content
Admin design systemv0.20.1

Input groups

Examples

Section titled “Examples”

Prepended addon

Section titled “Prepended addon”
$ 
<div class="input-group">
  <span class="input-group-addon">$</span>
  <input class="input" type="number" placeholder="0.00" />
</div>

Appended addon

Section titled “Appended addon”
.example.com 
<div class="input-group">
  <input class="input" type="text" placeholder="subdomain" />
  <span class="input-group-addon">.example.com</span>
</div>

Both ends

Section titled “Both ends”
$ USD 
<div class="input-group">
  <span class="input-group-addon">$</span>
  <input class="input" type="number" placeholder="0.00" />
  <span class="input-group-addon">USD</span>
</div>

With a button

Section titled “With a button”
<div class="input-group">
  <input class="input" type="search" placeholder="Search orders…" />
  <button class="btn btn-primary" type="submit">Search</button>
</div>

With icon addons

Section titled “With icon addons”
<div class="input-group">
  <span class="input-group-addon" aria-hidden="true"
    ><i class="ti ti-search"></i
  ></span>
  <input class="input" type="search" placeholder="Search products…" />
</div>
<div class="input-group">
  <span class="input-group-addon" aria-hidden="true"
    ><i class="ti ti-at"></i
  ></span>
  <input class="input" type="email" placeholder="you@example.com" />
</div>
<div class="input-group">
  <input class="input" type="text" placeholder="Enter command" />
  <button class="btn btn-primary" type="submit" aria-label="Run">
    <i class="ti ti-arrow-right" aria-hidden="true"></i>
  </button>
</div>

Reference

Section titled “Reference”

React

Section titled “React”
Part Renders Class
InputGroup <div> input-group
InputGroup.Addon <span> input-group-addon

No props of its own — each part takes the native attributes of its element. Any child works: Input, Button, Addon, or your own element.

Vanilla

Section titled “Vanilla”
Class Effect
input-group Joins its children into one flush row: square inner corners, 1px overlap, focus lifted above the seam
input-group-addon Static segment: 0.75rem side padding, text-sm muted on a muted fill, bordered, no wrapping

The seam rules target every direct child, not a specific class, so an input, a btn, an addon, or anything else joins the row in source order. The first and last child keep their outer radius. A focused child is lifted above its neighbour’s overlapping edge so the focus ring isn’t clipped.

An addon takes any content, including an icon — mark a decorative one aria-hidden. For a borderless glyph floating inside the field instead, use input icons.