Input groups attach text, icons, buttons and dropdowns to the side of a field - perfect for currencies, usernames, search boxes, coupon codes and quantity steppers.
1Prefix text
A leading @ shows that the field expects a username.
@
<label for="ig-username-194" class="form-label">Username</label>
<div class="input-group">
<span class="input-group-text">@</span><input type="text" class="form-control" id="ig-username-194" placeholder="luna">
</div>2Suffix text
A trailing domain helps when the email address is part of a company account.
@miraly.com
<label for="ig-mailbox-195" class="form-label">Mailbox</label>
<div class="input-group">
<input type="text" class="form-control" id="ig-mailbox-195" placeholder="luna"><span class="input-group-text">@miraly.com</span>
</div>3Both sides
Currency symbol before and cents after the amount.
$.00
<label for="ig-price-196" class="form-label">Price</label>
<div class="input-group">
<span class="input-group-text">$</span><input type="number" class="form-control" id="ig-price-196" value="129"><span class="input-group-text">.00</span>
</div>4Web address
Prefix and suffix around a subdomain for a store or workspace address.
www..shop
<label for="ig-site-197" class="form-label">Your store address</label>
<div class="input-group">
<span class="input-group-text">www.</span><input type="text" class="form-control" id="ig-site-197" value="museanhub"><span class="input-group-text">.shop</span>
</div>5Sizes
input-group-lg and input-group-sm resize every part of the group.
<div class="input-group input-group-lg mb-2">
<span class="input-group-text"><i class="bi bi-search" aria-hidden="true"></i></span>
<label for="ig-lg-198" class="visually-hidden">Large search</label>
<input type="text" class="form-control" id="ig-lg-198" placeholder="Large group">
</div>
<div class="input-group input-group-sm">
<span class="input-group-text"><i class="bi bi-search" aria-hidden="true"></i></span>
<label for="ig-sm-199" class="visually-hidden">Small search</label>
<input type="text" class="form-control" id="ig-sm-199" placeholder="Small group">
</div>6Button addon
A search field with its submit button attached.
<form role="search">
<label for="ig-search-200" class="visually-hidden">Search the help center</label>
<div class="input-group">
<input type="search" class="form-control" id="ig-search-200" placeholder="Search the help center">
<button class="btn btn-primary" type="submit">Search</button>
</div>
</form>7Quantity stepper
Minus and plus buttons around a centred number.
<label for="ig-qty-201" class="form-label">Quantity</label>
<div class="input-group" style="max-width: 10rem;">
<button class="btn btn-outline-secondary" type="button" aria-label="Decrease"><i class="bi bi-dash" aria-hidden="true"></i></button>
<input type="number" class="form-control text-center" id="ig-qty-201" value="2" min="1">
<button class="btn btn-outline-secondary" type="button" aria-label="Increase"><i class="bi bi-plus" aria-hidden="true"></i></button>
</div>8Dropdown addon
A dropdown button lets people switch the currency of an amount.
<label for="ig-amount-202" class="form-label">Amount</label>
<div class="input-group">
<input type="number" class="form-control" id="ig-amount-202" value="711">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-ui-toggle="dropdown" aria-expanded="false">USD</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item active" href="#">USD</a></li>
<li><a class="dropdown-item" href="#">EUR</a></li>
<li><a class="dropdown-item" href="#">GBP</a></li>
<li><a class="dropdown-item" href="#">JPY</a></li>
</ul>
</div>9Split button
A main action plus a menu of related actions next to the input.
<label for="ig-recipient-203" class="form-label">Share with</label>
<div class="input-group">
<input type="email" class="form-control" id="ig-recipient-203" placeholder="sofia.ashford@example.com">
<button type="button" class="btn btn-primary">Share</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-ui-toggle="dropdown" aria-expanded="false"><span class="visually-hidden">More options</span></button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Share as viewer</a></li>
<li><a class="dropdown-item" href="#">Share as editor</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Copy link</a></li>
</ul>
</div>10Checkbox addon
A checkbox in the addon enables or confirms the value next to it.
<label for="ig-alt-email-204" class="form-label">Backup email</label>
<div class="input-group">
<div class="input-group-text">
<input class="form-check-input mt-0" type="checkbox" id="ig-alt-on-205" checked aria-label="Use backup email">
</div>
<input type="email" class="form-control" id="ig-alt-email-204" value="luna@backup.example.com">
</div>11Multiple inputs
Two inputs share one group and one visible label.
Full name
<div class="input-group">
<span class="input-group-text">Full name</span>
<label for="ig-first-206" class="visually-hidden">First name</label>
<input type="text" class="form-control" id="ig-first-206" placeholder="Luna">
<label for="ig-last-207" class="visually-hidden">Last name</label>
<input type="text" class="form-control" id="ig-last-207" placeholder="Varga">
</div>12Multiple addons
Several addons can be stacked on the same side.
$USD/ hour
<label for="ig-total-208" class="form-label">Hourly rate</label>
<div class="input-group">
<span class="input-group-text">$</span><span class="input-group-text">USD</span><input type="number" class="form-control" id="ig-total-208" value="131"><span class="input-group-text">/ hour</span>
</div>13Icon addons
Icons instead of text make contact fields recognisable at a glance.
<div class="row g-3">
<div class="col-md-6">
<label for="ig-email-209" class="form-label">Email</label>
<div class="input-group">
<span class="input-group-text"><i class="bi bi-envelope" aria-hidden="true"></i></span><input type="email" class="form-control" id="ig-email-209" value="luna.varga@example.com">
</div>
</div>
<div class="col-md-6">
<label for="ig-phone-210" class="form-label">Phone</label>
<div class="input-group">
<span class="input-group-text"><i class="bi bi-telephone" aria-hidden="true"></i></span><input type="tel" class="form-control" id="ig-phone-210" value="+1 (555) 689-8623">
</div>
</div>
</div>14Textarea group
Input groups also work with textareas.
Delivery note
<div class="input-group">
<span class="input-group-text">Delivery note</span>
<label for="ig-note-211" class="visually-hidden">Delivery note</label>
<textarea class="form-control" id="ig-note-211" rows="2" placeholder="Leave the parcel at reception on 445 Willow Way"></textarea>
</div>15Select with button
A select and an action button combined, for example to add a member.
<label for="ig-select-212" class="form-label">Add to project</label>
<div class="input-group">
<select class="form-select" id="ig-select-212">
<option selected>Choose a teammate</option>
<option>Felix Ortega</option>
<option>Theo Morgan</option>
<option>Ravi Larsen</option>
</select>
<button class="btn btn-outline-primary" type="button"><i class="bi bi-person-plus" aria-hidden="true"></i> Add</button>
</div>16Password field
A lock icon in front and a show / hide toggle behind the password.
<label for="ig-password-213" class="form-label">New password</label>
<div class="input-group">
<span class="input-group-text"><i class="bi bi-lock" aria-hidden="true"></i></span><input type="password" class="form-control" id="ig-password-213" autocomplete="new-password" value="harbour-214">
<button class="btn btn-outline-secondary" type="button" data-demo-password-toggle="#ig-password-213" aria-label="Show or hide password"><i class="bi bi-eye-slash" aria-hidden="true"></i></button>
</div>17Copy invite link
A read-only field with a copy button using the data-demo-copy behaviour.
<label for="ig-invite-214" class="form-label">Invite link</label>
<div class="input-group">
<input type="text" class="form-control" id="ig-invite-214" value="miraly/invite/join-965909" readonly>
<button class="btn btn-outline-secondary" type="button" data-demo-copy="miraly/invite/join-965909"><i class="bi bi-clipboard" aria-hidden="true"></i> Copy</button>
</div>18Coupon code
Apply button with a success hint once a code was accepted.
Code applied - you save $25.14.
<label for="ig-coupon-215" class="form-label">Discount code</label>
<div class="input-group">
<input type="text" class="form-control text-uppercase" id="ig-coupon-215" value="SAVE26" aria-describedby="ig-coupon-help-216">
<button class="btn btn-dark" type="button">Apply</button>
</div>
<div id="ig-coupon-help-216" class="form-text text-success">
<i class="bi bi-check-circle" aria-hidden="true"></i> Code applied - you save $25.14.
</div>19Validation in a group
has-validation keeps rounded corners correct when feedback follows the input.
@
This handle is already taken.
<label for="ig-handle-217" class="form-label">Profile handle</label>
<div class="input-group has-validation">
<span class="input-group-text">@</span><input type="text" class="form-control is-invalid" id="ig-handle-217" value="luna" required>
<div class="invalid-feedback">
This handle is already taken.
</div>
</div>20Pill search group
A rounded search group with an icon button, styled with a tl- class.
<form role="search" class="tl-pill-group">
<label for="ig-pill-218" class="visually-hidden">Search products</label>
<div class="input-group">
<input type="search" class="form-control" id="ig-pill-218" placeholder="Search propertys...">
<button class="btn btn-primary" type="submit" aria-label="Search"><i class="bi bi-search" aria-hidden="true"></i></button>
</div>
</form>