Input group
Overview
Use the .bsk-input-group class with the .bsk-input-group-addon class to place text/icons, buttons, and even other
form elements, before or a after a control in a form field.
Multiple input group add-ons are not supported on a single side (i.e. 2 add-ons on the left).
Multiple form controls used in a single input group are not supported.
All input groups should have a label to make sure they can be understood by assistive technologies.
Supported elements
Input groups are designed for textual form inputs only. Other elements may be used, but are not supported and may not look right.
Inputs groups should be nested within other components such as form group or grid columns, not mixed together.
Tooltips and Popovers used within input groups require extra styling, such as the example below, to avoid side effects, and may not otherwise look right:
container: 'body';Variants
Basic input group
Input group addons can be before and/or after a form control, these examples use text.
<form>
<!-- Input group addon before a form control -->
<fieldset class="bsk-form-group">
<label class="bsk-control-label" for="form-input-group-example-1">Amount (sterling)</label>
<div class="bsk-input-group">
<span class="bsk-input-group-addon" id="form-input-group-example-1-addon-1">£</span>
<input type="number" class="bsk-form-control" placeholder="Amount (sterling)" id="form-input-group-example-1" aria-describedby="form-input-group-example-1-addon-1">
</div>
</fieldset>
<!-- Input group addon after a form control -->
<fieldset class="bsk-form-group">
<label class="bsk-control-label" for="form-input-group-example-2">Amount (thousands)</label>
<div class="bsk-input-group">
<input type="number" class="bsk-form-control" placeholder="Amount (thousands)" id="form-input-group-example-2" aria-describedby="form-input-group-example-2-addon-1">
<span class="bsk-input-group-addon" id="form-input-group-example-2-addon-1">000</span>
</div>
</fieldset>
<!-- Input group addon before and after a form control -->
<fieldset class="bsk-form-group">
<label class="bsk-control-label" for="form-input-group-example-3">Amount (£, thousands)</label>
<div class="bsk-input-group">
<span class="bsk-input-group-addon" id="form-input-group-example-3-addon-1">£</span>
<input type="number" class="bsk-form-control" placeholder="Amount" id="form-input-group-example-3" aria-describedby="form-input-group-example-3-addon-1" aria-describedby="form-input-group-example-3-addon-2">
<span class="bsk-input-group-addon" id="form-input-group-example-3-addon-2">000</span>
</div>
</fieldset>
</form>Icons can be used as well.
<form>
<fieldset class="bsk-form-group">
<label class="bsk-control-label" for="form-input-group-example-4">Username</label>
<div class="bsk-input-group">
<span class="bsk-input-group-addon" id="form-input-group-example-4-addon-1"><i class="fas fa-fw fa-user" aria-hidden="true"></i></span>
<input type="text" class="bsk-form-control" placeholder="Username" id="form-input-group-example-4" aria-describedby="form-input-group-example-4-addon-1">
</div>
</fieldset>
</form>Checkbox and radio input group
Radio options and checkboxes can be used instead of text.
<form>
<!-- Input group addon with checkbox control -->
<fieldset class="bsk-form-group">
<label class="bsk-control-label" for="form-input-group-example-5">Amount (sterling, optional surcharge)</label>
<div class="bsk-input-group">
<span class="bsk-input-group-addon" id="form-input-group-example-5-addon-1">
<input type="checkbox" aria-label="checkbox"> £
</span>
<input type="text" class="bsk-form-control" placeholder="Amount (sterling, optional surcharge)" id="form-input-group-example-5" aria-describedby="form-input-group-example-5-addon-1">
</div>
</fieldset>
<!-- Input group addon with radio option control -->
<fieldset class="bsk-form-group">
<label class="bsk-control-label" for="form-input-group-example-6">Amount (currency: sterling)</label>
<div class="bsk-input-group">
<span class="bsk-input-group-addon" id="form-input-group-example-6-addon-1">
<input type="radio" aria-label="radio option"> £
</span>
<input type="text" class="bsk-form-control" placeholder="Amount (currency: sterling)" id="form-input-group-example-6" aria-describedby="form-input-group-example-6-addon-1">
</div>
</fieldset>
</form>Sizing
Input groups scale with the size of their form group.
<form>
<fieldset class="bsk-form-group bsk-form-group-lg">
<label class="bsk-control-label" for="form-input-group-example-9">Large input group</label>
<div class="bsk-input-group">
<span class="bsk-input-group-addon" id="form-input-group-example-9-addon-1">Addon before</span>
<input type="text" class="bsk-form-control" id="form-input-group-example-9" aria-describedby="form-input-group-example-9-addon-1">
</div>
</fieldset>
<fieldset class="bsk-form-group">
<label class="bsk-control-label" for="form-input-group-example-10">Default input group</label>
<div class="bsk-input-group">
<span class="bsk-input-group-addon" id="form-input-group-example-10-addon-1">Addon before</span>
<input type="text" class="bsk-form-control" id="form-input-group-example-10" aria-describedby="form-input-group-example-10-addon-1">
</div>
</fieldset>
<fieldset class="bsk-form-group bsk-form-group-sm">
<label class="bsk-control-label" for="form-input-group-example-10">Small input group</label>
<div class="bsk-input-group">
<span class="bsk-input-group-addon" id="form-input-group-example-10-addon-1">Addon before</span>
<input type="text" class="bsk-form-control" id="form-input-group-example-10" aria-describedby="form-input-group-example-11-addon-1">
</div>
</fieldset>
</form>