Input group: code & specs
Input group base code
The base structure of an input group is consistent with other input components, with one key difference: grouped items are wrapped in a container using the .input-group class. Inside this wrapper, place the .response element along with any supporting items, such as addons (.input-group-text).
To create start or end add-ons, insert .input-group-text before or after the .response within the .input-group.
<div class="input">
<div class="input-label">
<label for="inputgroup-example" class="form-label">Input label</label>
</div>
<div class="input-group">
<div class="response text-input">
<input type="text" class="form-control" id="inputgroup-example">
</div>
<span class="input-group-text">End addon</span>
</div>
</div>
<div class="input">
<div class="input-label">
<label for="inputgroup-example" class="form-label">Input label</label>
</div>
<div class="input-group">
<span class="input-group-text">Start addon</span>
<div class="response text-input">
<input type="text" class="form-control" id="inputgroup-example">
</div>
</div>
</div>Action buttons
Action buttons are implemented in the same way as add-ons. To add one, place a <button> element with the classes .btn .btn-response after the .response within the .input-group.
Multiple buttons can be placed side by side when needed.
<div class="input">
<div class="input-label">
<label for="inputgroup-actionexample" class="form-label">Action button example</label>
</div>
<div class="input-group">
<div class="response text-input">
<input type="text" class="form-control" id="inputgroup-actionexample">
</div>
<button type="button" class="btn btn-response">
<span class="button-label">Action</span>
</button>
</div>
</div>Validation
Validation for input groups follows the same rules as the individual input components they contain. Each input type, such as text, number, select, or dropdown, should be validated according to the specific guidelines defined for that component.