Advanced

Documentation of advanced ipnuts with extended functionality, such is inputs with icons.

Files

app/styles/modules/_forms.scss

Inner addon

Text input with inner addon is just extended basic input. To create input with inner (text) addon you need to wrap <input> and addon element .input-addons__item into element with class .input-addons as shown in example below.

Example:

Mr.

.00

€

Complex example

Form label:

Help message

Error message

Code:

<div class="form-control form-control--input">
  <div class="input-addons">
    <!-- icon -->
    <div class="input-addons__item">
      <svg aria-label="Search" class="icon icon-search" role="presentation">
        <use xlink:href="#icon-search"></use>
      </svg>
    </div>

    <!-- button -->
    <div class="input-addons__item no-pad">
      <button class="btn btn--link">Action</button>
    </div>

    <!-- text -->
    <div class="input-addons__item">Mr.</div>

    <input class="input" type="text">

    <!-- after input -->
    <div class="input-addons__item">.00</div>
  </div>
</div>

Sizes

You can combine inner addon with different input sizes.

Example:

Mr.

Code:

<div class="form-control form-control--input">
  <div class="input-addons input-addons--small">
    <div class="input-addons__item ">...</div>
    <input class="input input--small" type="text">
  </div>
</div>

<div class="form-control form-control--input">
  <div class="input-addons input-addons--large">
    <div class="input-addons__item ">...</div>
    <input class="input input--large" type="text">
  </div>
</div>