Forms
Input groups and icons
Compose inputs with prefixed or suffixed text, buttons, selects, inline icons, and validation feedback.
Forms
Input groups and icons
Attach contextual text, controls, or actions to an input, or place decorative icons inside the control boundary.
Text prefix and suffix
HTML · Text prefix and suffix
<div class="bs-form-group">
<label class="bs-label" for="price">Price</label>
<div class="bs-input-group">
<span class="bs-input-group-text" aria-hidden="true">$</span>
<input
class="bs-input"
id="price"
name="price"
inputmode="decimal"
value="49.00"
aria-describedby="price-currency"
/>
<span class="bs-input-group-text" id="price-currency">USD</span>
</div>
</div>Button add-on
https://
HTML · Button add-on
<div class="bs-form-group">
<label class="bs-label" for="domain">Domain</label>
<div class="bs-input-group">
<span class="bs-input-group-text">https://</span>
<input class="bs-input" id="domain" name="domain" value="example.com" />
<button class="bs-btn bs-btn-secondary" type="button">Verify</button>
</div>
</div>Select add-on
HTML · Select add-on
<div class="bs-form-group">
<label class="bs-label" for="repository">Repository</label>
<div class="bs-input-group">
<select class="bs-select" aria-label="Repository owner">
<option>mikeroq</option>
<option>boobstrap</option>
</select>
<input class="bs-input" id="repository" name="repository" placeholder="Repository name" />
</div>
</div>Start icon
HTML · Start icon
<div class="bs-form-group">
<label class="bs-label" for="search">Search projects</label>
<div class="bs-input-wrap">
<i data-lucide="search" class="bs-icon bs-input-icon bs-input-icon-start" aria-hidden="true"></i>
<input
class="bs-input bs-input-has-icon-start"
id="search"
name="query"
type="search"
placeholder="Search projects"
/>
</div>
</div>End icon
HTML · End icon
<div class="bs-form-group">
<label class="bs-label" for="email">Verified email</label>
<div class="bs-input-wrap">
<input class="bs-input bs-input-has-icon-end" id="email" type="email" value="ada@example.com" />
<i data-lucide="check" class="bs-icon bs-input-icon bs-input-icon-end" aria-hidden="true"></i>
</div>
</div>Invalid input group
.boobstrap.org
Subdomains may only contain lowercase letters, numbers, and hyphens.HTML · Invalid input group
<div class="bs-form-group">
<label class="bs-label" for="subdomain">
Custom subdomain <span class="bs-label-required" aria-hidden="true">*</span>
</label>
<div class="bs-input-group">
<input
class="bs-input"
id="subdomain"
name="subdomain"
value="my invalid site!"
aria-invalid="true"
aria-describedby="subdomain-error"
/>
<span class="bs-input-group-text">.boobstrap.org</span>
</div>
<span class="bs-form-feedback bs-form-feedback-invalid" id="subdomain-error">
Subdomains may only contain lowercase letters, numbers, and hyphens.
</span>
</div>Icon responsibility
Decorative icons use aria-hidden="true"; the visible label still names the control. When the icon communicates status, pair it with visible or screen-reader text outside the SVG.
Sizing alignment
Group items naturally inherit control height and baseline alignments from the outer form system.
Input groups API
Input group and icon wrap classes join text add-ons, action buttons, and contextual icons directly into form controls.
| Class | Purpose |
|---|---|
.bs-input-group | Flex container joining inputs with adjacent text add-ons, dropdowns, or buttons with shared borders. |
.bs-input-group-text | Prefix or suffix label segment rendered inside an input group with muted surface styling. |
.bs-input-wrap | Relative container positioning absolute start or end icons inside an input field. |
.bs-input-icon | Standardized icon class normalizing size and current-color stroke inside inputs. |
.bs-input-icon-start | Positions an icon on the leading edge (left in LTR, right in RTL) of an input wrapper. |
.bs-input-icon-end | Positions an icon on the trailing edge (right in LTR, left in RTL) of an input wrapper. |
.bs-input-has-icon-start | Adds leading padding to the input so text does not collide with a start icon. |
.bs-input-has-icon-end | Adds trailing padding to the input so text does not collide with an end icon. |