Advanced

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

Files

app/styles/sections/_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>

Dropdown input

Input with dropdown component.

Example:

Code:

<div class="form-control btn-dropdown">
  <div class="input-addons">
    <input class="input" type="text">
    <button class="btn btn--link-grey btn--small btn--equal input-addons__item" data-toggle="self, #input-dropdown" data-toggle-expand="" aria-haspopup="true" aria-expanded="false"><span class="icon icon-specialinput ">
      // icon
    </button>
  </div>
  <div class="dropdown dropdown--nowrap dropdown--space-small" id="input-dropdown" data-dropdown="" data-toggle-expand="" data-dropdown-interactive="" style="width: 100%;" aria-expanded="false">
    <p class="text-small text-color-grey border-bottom mb-small">Advanced page options</p>
    <div class="form-control mb-small">
      <input class="input" type="text" placeholder="Seitennummern">
    </div>
    <div class="form-control mb-small">
      <input class="input" type="text" placeholder="Prefix">
    </div>
    <div class="form-control mb-none">
      <input class="input" type="text" placeholder="Spezial - Anzeige">
    </div>
  </div>
</div>

Datepicker

Datepicker can be created apllying data-datepicker on an <input> element. Then javascript will dynamicaly inject HTML DOM for custom datepicker.

Javascript dependency

Select component requires plugin: flatpickr

Note

To toggle the datepicker on click, use data-toggle="datepicker"

Example:

Code:

<div class="form-control form-control--input">
  <input class="input" type="text" placeholder="Datepicker" data-datepicker="">
</div>