Input Group

Extend form controls by prepending or appending text, icons, or buttons using .velin-input-group.

Text add-ons

Place a .velin-input-group__text before or after the input.

.00

$ .00

<div class="velin-input-group">
  <span class="velin-input-group__text">@</span>
  <input type="text" class="velin-input" placeholder="Username">
</div>

<div class="velin-input-group">
  <input type="text" class="velin-input" placeholder="Amount">
  <span class="velin-input-group__text">.00</span>
</div>

<div class="velin-input-group">
  <span class="velin-input-group__text">$</span>
  <input type="text" class="velin-input" placeholder="Price">
  <span class="velin-input-group__text">.00</span>
</div>

Icon add-ons

Use <velin-icon> inside the text span for icon prepend/append.

<div class="velin-input-group">
  <span class="velin-input-group__text">
    <velin-icon name="mail" size="16"></velin-icon>
  </span>
  <input type="email" class="velin-input" placeholder="Email address">
</div>

Button add-ons

Append or prepend buttons to an input group.

<div class="velin-input-group">
  <input type="text" class="velin-input" placeholder="Search…">
  <button class="btn btn-primary" type="button">Go</button>
</div>

<div class="velin-input-group">
  <button class="btn btn-outline-secondary" type="button">Options</button>
  <input type="text" class="velin-input" placeholder="Input with button">
</div>

Sizing

Add .velin-input-group--sm or .velin-input-group--lg to the wrapper.

<div class="velin-input-group velin-input-group--sm">…</div>
<div class="velin-input-group">…</div>
<div class="velin-input-group velin-input-group--lg">…</div>