Forms
Input groups and icons
Compose inputs with prefixed or suffixed text, buttons, selects, and inline icons.
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"
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-input-group">
<span class="bs-input-group-text">https://</span>
<input class="bs-input" aria-label="Domain" />
<button class="bs-btn bs-btn-secondary" type="button">Verify</button>
</div>Select add-on
HTML · Select add-on
<div class="bs-input-group">
<select class="bs-select" aria-label="Repository owner"><option>mikeroq</option></select>
<input class="bs-input" aria-label="Repository name" />
</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-input-wrap">
<input class="bs-input bs-input-has-icon-end" type="email" aria-label="Verified email" />
<i data-lucide="check" class="bs-icon bs-input-icon bs-input-icon-end" aria-hidden="true"></i>
</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.