Input group
One box holding an input with text or icons at the start and end. It looks the same as Input.
Icon and a result count
A <span> before the input sits at the start;
one after it sits at the end. Give icons aria-hidden.
The input needs an aria-label or a label.
12 results
<div class="stack docs-narrow">
<div class="input-group">
<span><i class="icon icon-search" aria-hidden="true"></i></span>
<input type="search" placeholder="Search orders" aria-label="Search orders" />
<span>12 results</span>
</div>
</div>Prefix and suffix
Good for prices, weights, percentages or domains. It works inside
a .field with a label.
$
USD
kg
https://
.tsunami.shop
<div class="stack docs-narrow">
<div class="field">
<label for="ig-price">Price</label>
<div class="input-group">
<span>$</span>
<input id="ig-price" type="text" inputmode="decimal" value="129.00" />
<span>USD</span>
</div>
</div>
<div class="field">
<label for="ig-weight">Weight</label>
<div class="input-group">
<input id="ig-weight" type="number" min="0" step="0.1" value="0.5" />
<span>kg</span>
</div>
</div>
<div class="field">
<label for="ig-domain">Store domain</label>
<div class="input-group">
<span>https://</span>
<input id="ig-domain" type="text" value="emmawilson" />
<span>.tsunami.shop</span>
</div>
</div>
</div>Sizes
Each data-size matches the height of an
.input and a .btn of the same size.
<div class="stack docs-narrow">
<div class="input-group" data-size="sm">
<span><i class="icon icon-tag" aria-hidden="true"></i></span>
<input type="text" placeholder="Tag" aria-label="Tag (small)" />
</div>
<div class="input-group">
<span><i class="icon icon-tag" aria-hidden="true"></i></span>
<input type="text" placeholder="Tag" aria-label="Tag (default)" />
</div>
<div class="input-group" data-size="lg">
<span><i class="icon icon-tag" aria-hidden="true"></i></span>
<input type="text" placeholder="Tag" aria-label="Tag (large)" />
</div>
</div>Ghost in a card header
Emma Wilson · emma.wilson@example.com
<div class="card">
<header>
<div class="input-group" data-variant="ghost">
<span><i class="icon icon-search" aria-hidden="true"></i></span>
<input type="search" placeholder="Search customers" aria-label="Search customers" />
</div>
</header>
<div>Emma Wilson · emma.wilson@example.com</div>
</div>Invalid and disabled
Put aria-invalid and disabled on the
input. The box follows on its own.
%
Must be 100% or less
$
<div class="stack docs-narrow">
<div class="field">
<label for="ig-percent">Discount</label>
<div class="input-group">
<input id="ig-percent" type="text" inputmode="numeric" value="120" aria-invalid="true" aria-describedby="ig-percent-error" />
<span>%</span>
</div>
<small id="ig-percent-error">Must be 100% or less</small>
</div>
<div class="input-group">
<span>$</span>
<input type="text" value="29.00" aria-label="Original price" disabled />
</div>
</div>Attributes
| Attribute / element | Values | Description |
|---|---|---|
.
|
A bordered box around one input and its start/end spans | |
.
|
Borderless input that fills the remaining space. Needs a label or aria-label | |
.
|
Muted text or icon. Placed by HTML order (before the input = start, after = end) | |
data-size |
sm, lg (none = default 36px)
|
Same height as .input / .btn |
data-variant |
ghost (none = bordered) |
No border or background. For card headers or toolbars |
aria-invalid |
true |
On the input: the box border turns danger |
disabled |
On the input: the box background turns subtle | |
aria-hidden |
true |
On decorative icons in a span |