Skip to content
admin design system

Input groups

Attach a prefix, suffix, or action button to an input. The group collapses the shared border between adjacent children and keeps the outer corners rounded.

Examples

Section titled “Examples”

Prepended addon

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

Appended addon

Section titled “Appended addon”
.example.com 
<div class="input-group">
  <input class="input input-bordered" 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 input-bordered" 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 input-bordered"
    type="search"
    placeholder="Search orders…"
  />
  <button class="btn btn-primary" type="submit">Search</button>
</div>

With icon addons

Section titled “With icon addons”

.input-group-addon accepts any content. See Icons.

 
<div class="input-group">
  <span class="input-group-addon" aria-hidden="true"
    ><i class="ti ti-search"></i
  ></span>
  <input
    class="input input-bordered"
    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 input-bordered"
    type="email"
    placeholder="you@example.com"
  />
</div>
<div class="input-group">
  <input
    class="input input-bordered"
    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>