<div class="form-group">
<label class="sr-only" for="customAmount">Amount (in dollars)</label>
<div class="input-group input-group-block input-group-left">
<span class="input-group-addon">
<svg class="icon" viewBox="0 0 256 256">
<use xlink:href="/assets/svgs/icons.svg#usd"></use>
</svg>
</span>
<input class="form-control" name="customAmount" placeholder="Enter Amount" value="" type="customAmount">
</div>
</div>
<div class="input-group">
<input class="form-control" placeholder="First Name" type="text">
<span class="input-group-btn">
<button class="btn btn-secondary" type="submit">
Submit
</button>
</span>
</div>
<hr>
<div class="input-group">
<input class="form-control" placeholder="Search" type="text">
<span class="input-group-btn">
<button class="btn btn-secondary" type="submit">
<svg class="icon icon-1" viewBox="0 0 256 256">
<use xlink:href="/assets/svgs/icons.svg#search"></use>
</svg>
</button>
</span>
</div>
<div class="row">
<div class="form-group col-xs-6">
<label class="sr-only" for="first_name">First Name</label>
<input class="form-control" name="first_name" placeholder="First Name" value="" type="first_name">
</div>
<div class="form-group col-xs-6">
<label class="sr-only" for="last_name">Last Name</label>
<input class="form-control" name="last_name" placeholder="Last Name" value="" type="last_name">
</div>
</div>
<div class="row">
<div class="form-group col-xs-4">
<label class="sr-only" for="cc_exp">Month/Year</label>
<input class="form-control" name="cc_exp" placeholder="MM/YY" value="" type="cc_exp">
</div>
<div class="form-group col-xs-4">
<label class="sr-only" for="cc_ccv">CVV Number</label>
<input class="form-control" name="cc_ccv" placeholder="CVV" value="" type="cc_ccv">
</div>
<div class="form-group col-xs-4">
<label class="sr-only" for="cc_zip">Zip Code</label>
<input class="form-control" name="cc_zip" placeholder="Zip Code" value="" type="cc_zip">
</div>
</div>
In some cases, an input may need to have interactive elements (like buttons) nested within itself. These elements are expected to share the same validation and focus states of its input parent. To achieve this effect, a class of .with-icon-btn
is added to the .input-group
component.
<form action="." class="input-group-flex">
<div class="input-group with-icon-btn">
<input class="form-control" placeholder="Location" type="search">
<div class="icon-btn-wrapper"></div>
<span class="addon-btn">
<button type="button">
<svg class="icon icon-1" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="/assets/svgs/icons.svg#close-thin" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>
</button>
</span>
<span class="addon-btn">
<button type="button">
<svg class="icon icon-1" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="/assets/svgs/icons.svg#equalizer" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>
</button>
</span>
</div>
</form>
The component above can be expanded upon, including a commonly used Bootstrap element called an .input-group-btn
, which is a nice way to say "a button that looks like it's attached to an input." But because this element is already doing some funky stuff with the embedded icon buttons, a class of .with-input-group-btn
needs to be added with the .with-icon-btn
class to ensure the appropriate layout is rendered.
<form action="." class="input-group-flex">
<div class="input-group with-icon-btn with-input-group-btn">
<input class="form-control" placeholder="Keyword" type="text">
<div class="icon-btn-wrapper"></div>
<span class="addon-btn">
<button type="button">
<svg class="icon icon-1" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="/assets/svgs/icons.svg#close-thin" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>
</button>
</span>
<span class="addon-btn">
<button type="button">
<svg class="icon icon-1" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="/assets/svgs/icons.svg#equalizer" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>
</button>
</span>
<span class="input-group-btn">
<button class="btn btn-secondary" type="submit">
<svg class="icon icon-1" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="/assets/svgs/icons.svg#search" xmlns:xlink="http://www.w3.org/1999/xlink"></use>
</svg>
</button>
</span>
</div>
</form>