Advanced

Documentation of possible form layouts including vertical, multicolumn and inline layout.

Files

app/styles/modules/_forms.scss
app/styles/modules/_slider.scss

Input with icon

Inputs and select can have additional icon inside element. To include desired icon you need to wrap input/select in .form-advanced element with additional class .form-advanced-icon. Icon has to be placed after input element as shown on examples below. Position of icon can be set via additional class .form-advanced-left (right is default).

Example:

Code:

<div class="form-advanced form-advanced-icon">
  <input class="input" placeholder="Input" type="text"><i class="icon icon-m">search</i>
</div>

<div class="form-advanced form-advanced-icon">
  <input class="input input-l" placeholder="Input" type="text">
  <i class="icon icon-m">search</i>
</div>

<div class="form-advanced form-advanced-icon">
  <textarea class="input" placeholder="Textarea" type="text" rows="3"></textarea><i class="icon icon-m">search</i>
</div>

<div class="form-advanced form-advanced-icon">
  <select class="js-select"></select>
  <i class="icon icon-m">search</i>
</div>

<div class="form-advanced form-advanced-icon form-advanced-icon-left">
  <input class="input" placeholder="Input" type="text">
  <i class="icon icon-m">search</i>
</div>

<div class="form-advanced form-advanced-icon form-advanced-icon-left">
  <input class="input input-l" placeholder="Input" type="text">
  <i class="icon icon-m">search</i>
</div>

<div class="form-advanced form-advanced-icon form-advanced-icon-left">
  <textarea class="input" placeholder="Textarea" type="text" rows="3"></textarea>
  <i class="icon icon-m">search</i>
</div>

<div class="form-advanced form-advanced-icon form-advanced-icon-left">
  <select class="js-select"></select>
  <i class="icon icon-m">search</i>
</div>

Input with datepicker

Input datepicker is simple input element with popup datepicker window. You can create input datepicker by using class .datepicker-here and data attributes to setup datepicker.

Javascript dependency

For datepicker is used Air-datepicker plugin: t1m0n.name/air-datepicker/docs/

Example:

Code:

<div class="form-advanced form-advanced-icon">
  <input class="input datepicker-here" data-language="sk" type="text">
  <i class="icon icon-m">calendar</i>
</div>

Range

In case you need to set range in datepicker, you follow example shown below or read documentation for Air-datepicker plugin mentioned above.

Example:

Code:

<div class="form-advanced form-advanced-icon">
  <input class="input datepicker-here" data-language="sk" data-range="true" data-multiple-dates-separator=" - " type="text">
  <i class="icon icon-m">calendar</i>
</div>

Visible datepicker

Initialize plugin on non text input element, such as <div>.

Example:

Code:

<div class="datepicker-here inline-block" data-language="sk"></div>

Input with autocomplete

Autocomplete can be bind to input element. Examples below show initialization as simple autocomplete, autocomplete with groups, autocomplete with custom row format and timepicker.

Javascript dependency

Datepicker component requiresAjax Autocomplete for jQuery plugin.

Example:

Code:

<script>
  // basic autocomplete
  $('#autocomplete-example').autocomplete({
    orientation: 'auto',
    minChars: 2,
    lookup: function lookup(query, done) {
      var result = { suggestions: [] };
      
      var entries = ['Pikachu', 'Charizard', 'Bulbasaur', 'Squirtle', 'Cubone', 'Charmander'].map(function(item) {
        return {
          value: item,
          data: item,
        }
      })

      result.suggestions = entries.reduce(function (acc, item) {
        if (item.value.toLowerCase().indexOf(query.toLowerCase()) != -1) {
          acc.push(item);
        }
        return acc;
      }, []);

      done(result);
    }
  });
  
  // autocomplete groups
  $('#autocomplete-groups-example').autocomplete({
    orientation: 'auto',
    minChars: 2,
    groupBy: 'category',
    lookup: function lookup(query, done) {
      var result = { suggestions: [] };
      
      var entriesPokemon = ['Pikachu', 'Charizard', 'Bulbasaur', 'Squirtle', 'Cubone', 'Charmander'].map(function(item) {
        return {
          value: item,
          data: { category: 'Pokémon' },
        }
      });
      
      var entriesFruits = ['Bannana', 'Apple', 'Pinnapple', 'Orange', 'Plum', 'Cherry'].map(function(item) {
        return {
          value: item,
          data: { category: 'Fruits' },
        }
      });

      result.suggestions = [].concat(entriesPokemon, entriesFruits).reduce(function (acc, item) {
        if (item.value.toLowerCase().indexOf(query.toLowerCase()) != -1) {
          acc.push(item);
        }
        return acc;
      }, []);

      done(result);
    }
  });
  
  // autocomplete with custom row format
  $('#autocomplete-format-example').autocomplete({
    orientation: 'auto',
    minChars: 2,
    groupBy: 'category',
    lookup: function lookup(query, done) {
      var entries = [];
      var result = { suggestions: [] };
      
      var entries = [
        {
          value: 'Terapeutical Aromatic Masaz',
          data: {
            category: 'Masáž',
            time: '60 min',
            price: '28',
          }
        },
        {
          value: 'Znackova anitstersova Masaz',
          data: {
            category: 'Masáž',
            time: '30 min',
            price: '30',
          }
        },
        {
          value: 'Californian Hair Coloring',
          data: {
            category: 'Hair',
            time: '45 min',
            price: '50',
          }
        },
        {
          value: 'Franch Nails',
          data: {
            category: 'Nails',
            time: '60 min',
            price: '15',
          }
        },
      ];
      
      result.suggestions = entries.reduce(function (acc, item) {
        if (item.value.toLowerCase().indexOf(query.toLowerCase()) != -1) {
          acc.push(item);
        }
        return acc;
      }, []);

      done(result);
    },
    formatResult: function (suggestion, currentValue) {
      return (
        '<div class="autocomplete-suggestion_label">' +
          suggestion.value +
        '</div>' +
        (suggestion.data.time 
          ? 
            ('<div class="autocomplete-suggestion_more">' +
              '<i class="icon icon-s">calendar</i>' + suggestion.data.time +
            '</div>')
          : null
        ) +
        (suggestion.data.time 
          ? 
            ('<div class="autocomplete-suggestion_more">' +
              '<i class="icon icon-s">euro</i>' + suggestion.data.price +
            '</div>')
          : null
        )
      );
    }
  });
  
  // timepicker
  $('#timepicker-example').autocomplete({
    orientation: 'auto',
    minChars: 0,
    lookup: function lookup(query, done) {
      var entries = [];
      var result = { suggestions: [] };

      for (var i = 0; i < 24; i++) {
        for (var j = 0; j < 4; j++) {
          entries.push({
            value: ('0' + i).slice(-2) + ':' + ('0' + j * 15).slice(-2),
            data: ('0' + i).slice(-2) + ':' + ('0' + j * 15).slice(-2)
          });
        }
      }

      result.suggestions = entries.reduce(function (acc, item) {
        if (item.value.startsWith(query)) {
          acc.push(item);
        }
        return acc;
      }, []);

      done(result);
    }
  });
</script>

Form with static text

If you need to incorporate text helpers inside form rows, you can do it with .form-static form element as shown on example below.

Example:

Form label:

This is static text inside form

Form label:

This is static text inside form

Code:

<div class="form-control">
  <div class="form-advanced-static">This is static text inside form</div>
</div>

<div class="form-control">
  <div class="form-advanced-static form-advanced-static-l">This is static text inside form</div>
</div>

Tags as radio-group

Tags can be used as special radio buttons as shown on example below.

Example:

Radio 0
Radio 1
Radio 2

Code:

<ul class="list-unstyled list-expanded">
  <li>

    <div class="radio-tag">
      <input class="radio-input" name="tags" id="tag-1" checked="checked" type="radio">
      <label class="radio-tag_label" for="tag-1">
        <span class="tag tag-active-default">
          <span class="tag_label">Radio 1</span>
          <span class="tag_more"></span>
        </span>
      </label>
    </div>
  </li>

  <li>
    <div class="radio-tag">
      <input class="radio-input" name="tags" id="tag-2" type="radio">
      <label class="radio-tag_label" for="tag-2">
        <span class="tag tag-active-default">
          <span class="tag_label">Radio 2</span>
          <span class="tag_more"></span>
        </span>
      </label>
    </div>
  </li>
  <li>
    ...
  </li>
</ul>

Colors

Color for active state of tag can be set by using additional class .tag-active[blue/green/yellow/orange/bloodorange] on .tag element.

Example:

Code:

<ul class="list-unstyled list-inline">
  <li>
    <div class="radio-tag">
      <input class="radio-input" name="tags" id="tag-blue" type="radio">
      <label class="radio-tag_label" for="tag-blue">
        <span class="tag tag-active-blue">
          <span class="tag_label">5.0</span>
        </span>
      </label>
    </div>
  </li>

  <li>
    <div class="radio-tag">
      <input class="radio-input" name="tags" id="tag-green" type="radio">
      <label class="radio-tag_label" for="tag-green">
        <span class="tag tag-active-green">
          <span class="tag_label">4.0</span>
        </span>
      </label>
    </div>
  </li>

  <li>
   ...
  </li>
  ...
</ul>

Slider

Basic sliders variants: simple / multiple handles / with tooltip / disabled.

Javascript dependency

Slider uses noUiSlider plugin /bower_components/nouislider/distribute/nouislider.js
Documentation for noUiSlider: http://refreshless.com/nouislider/

Example:

Simple

Multiple

Disabled

Code:

<script>
  noUiSlider.create(document.getElementById('simple-slider'), {
    start: 1000,
    range: {
      'min': 0,
      'max': 5000
    },
    step: 1
  });
</script>
<div id="simple-slider" class="js-slider"></div>

<script>
  noUiSlider.create(document.getElementById('simple-slider-multiple'), {
    start: [1000, 300-],
    range: {
      'min': 0,
      'max': 5000
    },
    step: 1
  });
</script>
<div id="simple-slider-multiple" class="js-slider"></div>

<script>
  noUiSlider.create(document.getElementById('simple-slider-disabled'), {
    start: 1000,
    range: {
      'min': 0,
      'max': 5000
    },
    step: 1
  });
</script>
<div id="simple-slider-disabled" class="js-slider" disabled></div>

Slider with connect

Example:

Code:

<script>
  noUiSlider.create(document.getElementById('connect-slider'), {
    start: 1000,
    range: {
      'min': 0,
      'max': 5000
    },
    connect: true,
    step: 1
  });
</script>
<div id="connect-slider" class="js-slider"></div>

<script>
  noUiSlider.create(document.getElementById('connect-slider-multiple'), {
    start: [1000, 3000],
    range: {
      'min': 0,
      'max': 5000
    },
    connect: true,
    step: 1
  });
</script>
<div id="connect-slider-multiple" class="js-slider"></div>