Basic

Documentation of basic form components such as inputs, textarea, checkboxes, radios and selects.

Files

app/styles/modules/_forms.scss

Text input

Text inputs are basic form components and can be created by using class .input on <input> element.

Example:code
Code:
<input placeholder="Input" class="input" type="text">

Text input states

States can be set by attributes and classes like .active, [disabled], [readonly], .readonly and .error.

Example:code
Code:
<input placeholder="Focus" class="input active" type="text">
<input placeholder="Disabled" disabled="" class="input" type="text">
<input placeholder="Readonly" readonly="" class="input" type="text">
<input placeholder="Error" class="input error" type="text">

Text input sizes

There are two main sizes of text inputs: medium (default) and large .input-l.

Example:code
Code:
<input placeholder="Large" class="input input-l" type="text">
<input placeholder="Medium" class="input" type="text">

Textarea

Textarea can be styled by using class .input on <textarea> tag. Height can be specified with [rows] attribute. States for textarea are same as for input.

Example:code
Code:
<textarea rows="3" class="input"></textarea>

Checkbox / Radio

Checkbox or radio element can be created by wrapping native <inuput> element and <label> with specific class as shown in examples below.

Warning

To proper function of checkbox or radio, do not forget to spicify ID for native <input> element and [for] attribute for custom element.

Example:code
Code:
<div class="checkbox">
  <input id="..." name="..." class="checkbox-input" type="checkbox">
  <label for="..." class="checkbox-custom"></label>
  <label for="..." class="checkbox-label">Checkbox</label>
</div>

<div class="radio">
  <input id="..." name="..." class="radio-input" type="radio">
  <label for="..." class="radio-custom"></label>
  <label for="..." class="radio-label">Radio</label>
</div>

Checkbox states

States can be set by using attributes and classes like .active, [disabled], .disabled, [readonly], .readonly, .checkbox-indeterminate and .error on hidden native input element.

Example:code
Code:
<div class="checkbox">
  <input id="..." name="..." checked="" class="checkbox-input active" type="checkbox">
  <label for="..." class="checkbox-custom"></label>
  <label for="..." class="checkbox-label">Focus</label>
</div>

<div class="checkbox">
  <input id="..." name="..." disabled="" checked="" class="checkbox-input" type="checkbox">
  <label for="..." class="checkbox-custom"></label>
  <label for="..." class="checkbox-label">Disabled</label>
</div>

<div class="checkbox checkbox-indeterminate">
  <input class="checkbox-input" id="..." type="checkbox" name="..."/>
  <label class="checkbox-custom" for="..."></label>
  <label class="checkbox-label" for="...">Indeterminate</label>
</div>

<div class="checkbox">
  <input id="..." name="..." readonly="" checked="" class="checkbox-input" type="checkbox">
  ...
</div>

<div class="checkbox">
  <input id="..." name="..." checked="" class="checkbox-input error" type="checkbox">
  ...
</div>

Radio states

States can be set same way as for checkboxes.

Example:code
Code:
<div class="radio">
  <input id="..." name="..." checked="" class="radio-input active" type="radio">
  <label for="..." class="radio-custom"></label>
  <label for="..." class="radio-label">Focus</label>
</div>

<div class="radio">
  <input id="..." name="..." disabled="" checked="" class="radio-input" type="radio">
  ...
</div>

<div class="radio">
  <input id="..." name="..." readonly="" checked="" class="radio-input" type="radio">
  ...
</div>

<div class="radio">
  <input id="..." name="..." checked="" class="radio-input error" type="radio">
  ...
</div>

Radio styles

Example:code
Code:
<div class="radio">
  <input class="radio-input" id="radio-group-04" type="radio">
  <label class="radio-custom radio-custom-2" for="radio-group-04"></label>
  <label class="radio-label" for="radio-group-04">Radio (radio-custom-2)</label>
</div>

Checkbox / Radio groups

Checkbox (radio) group can be created by wrapping more checkbox (radio) elements into element with class .checkbox-group or .radio-group.

Warning

States for checkboxes and radios are set individualy on each element.

Example:code

Checkbox group

Radio group

Code:
<div class="checkbox-group">
  <div class="checkbox">
    <input id="..." name="..." class="checkbox-input" type="checkbox">
    <label for="..." class="checkbox-custom"></label>
    <label for="..." class="checkbox-label">Checkbox 1</label>
  </div>
  <div class="checkbox">
    ...
  </div>
  <div class="checkbox">
    ...
  </div>
</div>

<div class="radio-group">
  <div class="radio">
    <input id="..." name="..." class="radio-input" type="radio">
    <label for="..." class="radio-custom"></label>
    <label for="..." class="radio-label">Radio 1</label>
  </div>
  <div class="radio">
    ...
  </div>
  <div class="radio">
    ...
  </div>
</div>

Switch

Switch is basically checkbox with different visual. Result can be achieved by adding .checkbox-switch class on checkbox element and .checkbox-switch_custom instead of checkbox-custom on label.

Example:code
Code:
<div class="checkbox checkbox-switch">
  <input class="checkbox-input" id="..." type="checkbox">
  <label class="checkbox-switch_custom" for="..."></label>
  <label class="checkbox-label" for="...">Switch</label>
</div>

Radio as check

Radio check is basically radio with different visual. Result can be achieved by adding .radio-check class on radio element and .radio-check_custom instead of radio-custom on label.

Example:code
Code:
<div class="radio radio-check">
  <input class="radio-input" id="..." type="radio">
  <label class="radio-check_custom" for="check"></label>
  <label class="radio-label" for="...">Radio as check
  </label>
</div>

Select

Select can be created by using native <select> element with class .js-select. Then javascript will dynamicaly inject HTML DOM for custom select.

Javascript dependency

Select component requires Select2 plugin.

Note

Documentation of custom Select2 initialization.

Example:code
Code:
<select class="js-select">
  <option>Option 1</option>
  <option>Option 2</option>
  ...
</select>

Select states

States can be set by using attributes and classes like [disabled], .disabled and .error on hidden native select element.

Example:code
Code:
<!-- disabled -->
<select disabled="" class="js-select">
  <option>Option 1</option>
  ...
</select>

<!-- error -->
<select class="js-select error">
  <option>Option 1</option>
  ...
</select>

Select placeholder

Placeholder can be added via [data-placeholder] attribute with placeholder text and additional empty option element on top of the select options.

Example:code
Code:
<select class="js-select" data-placeholder="Placeholder" >
  <option></option>
  <option>Option 1</option>
  ...
</select>

Select with live search

Live search can be turned on with data attribute [data-select-search].

Example:code
Code:
<select class="js-select" data-select-search>
  <option>Option 1</option>
  <option>Option 2</option>
  ...
</select>

Select with groups

Live search can be turned on with class.js-select-search.

Example:code
Code:
<select class="js-select">
  <option>Option 1</option>
  <option>Option 2</option>
  ...
</select>

Select sizes

There are two default sizes of select: medium and large. These can be set by using classes .select-[size] on hidden native select element.

Example:code
Code:
<!-- large -->
<select class="js-select select-l">
  <option>Option 1</option>
  ...
</select>

<!-- medium -->
<select class="js-select">
  <option>Option 1</option>
  ...
</select>

Select with event details

If you want display event details such as prices, or event duration in select, use class .js-select-event instead of .js-select. Then each option could have attributes: [data-price], [data-duration].

Example:code
Code:
<select class="js-select-event">
  <option data-price="30 EUR" data-duration="60 min">Item 1</option>
  <option data-price="8990 HUF" data-duration="45 min">Item 1</option>
  <option data-price="999 CZK" data-duration="90 min">Item 1</option>
  ...
</select>

Multiselect

Multiselect can be created with additional parameter [mutiple] on select element as shown on example below.

Example:code
Code:
<select class="js-select">
  <option selected="selected">Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <option selected="selected">Option 4</option>
  <option>Option 5</option>
  <option>Option 6</option>
</select>

<select class="js-select select-l">
  <option selected="selected">Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <option selected="selected">Option 4</option>
  <option>Option 5</option>
  <option>Option 6</option>
</select>

Multiselect with additional data

Multiselect can contain additional data as data attributes on select option. Currently are supported these options: [data-rating=Number] and [data-avatar=URL].

Example:code
Code:
<select class="js-select" multiple>
  <option data-rating="4" data-avatar="/images/avatar.png" selected="selected">Charizard</option>
  <option data-rating="3.5" data-avatar="/images/avatar.png">Onyx</option>
  <option data-rating="5" data-avatar="/images/avatar.png">Pikachu</option>
</select>

Multiselect limit selection

If you need to support selection limit, you can add it via data-selection-limit=Number attribute on select element.

Note

Special behavior is triggered if list of options contains option with [value="all"] attribute. Then if limit of selected items is reached, option with this attribute is unselected and new option is selected instead.
Example:code
Code:

Multiselect with add client popup

Select with custom action when all options in dropdown are filtred out.

Example:code
Code:
<select id="client" multiple data-selection-limit="1" data-select-type="client">
  ...
</select>

<div class="tooltip_templates hide">
  <div id="tooltip-new-client">
    <form>
      <div class="tooltip_content">
        ...
      </div>
    </form>
  </div>
</div>

var clientSelect = new myApp.Select({ selector: '#client' }, {
  tempatateNoResults: function() {
      var self = this;
      var preventClose = true;
      var $tooltip = $('' +
        '<button class="btn btn-link btn-icon-left">' +
          '<i class="icon icon-s">plus</i>' +
          'Add client' +
        '</button>' +
      '').tooltipster({
        contentAsHTML: true,
        contentCloning: true,
        side: 'top',
        interactive: true,
        trigger: 'click',
        theme: 'tooltipster-shadow',
        minWidth: 400,
        maxWidth: 400,
        selfDestruction: false,
      })
      .tooltipster('content', $('#tooltip-new-client'));

      var instance = $tooltip.tooltipster('instance');

      $(instance.content().find('[data-tooltip-action]')).on('click', function() {
        switch ($(this).data('tooltip-action')) {
          case 'close':
            closeTooltip();
            break;
          case 'add':
            addValueAndCloseTooltip();
            break;
        }
      });

      function addValueAndCloseTooltip() {
        $(self.$element[0]).append(
          '<option value="1" selected>' +
          instance.content().find("#first-name").val() +
          ' ' +
          instance.content().find("#last-name").val() +
          '</option>'
        );
        self.trigger('change');

        closeTooltip();
      }

      function closeTooltip(e) {
        if (
          !e &&
          !(e && $(e.target).closest('.tooltipster-base').length) &&
          !(e && $(e.target).closest('.select2-results__message').length)
        ) {
          preventClose = false;
          instance.close();
          $(document).off('click', closeTooltip);
          $(document).off('keyup', keyHandler);
          self.trigger('change');
        }
      }

      function keyHandler(e) {
        if (e.which == 13) addValueAndCloseTooltip();
        if (e.which == 27) closeTooltip();
      }

      instance.on('before', function() {
        instance.on('close', function(e) {
          if (preventClose) {
            e.stop();
          }
        });

        $(document).on('click', closeTooltip);
        $(document).on('keyup', keyHandler);

      });

      return $tooltip;
    }
  }
);

Select with tags

Multiselect can be used to set up fields used for tagging with additional data attribute [data-tags] as shown on example below.

Example:code
Code:
<select class="js-select" multiple="" data-tags>
  <option selected="">Tag 1</option>
  <option selected="">Tag 2</option>
  <option>Tag 3</option>
  <option>Tag 4</option>
  <option>Tag 5</option>
</select>

<select class="select-l js-select" multiple="" data-tags>
  <option selected="">Tag 1</option>
  <option selected="">Tag 2</option>
  <option>Tag 3</option>
  <option>Tag 4</option>
  <option>Tag 5</option>
</select>