Tag Group

Overview

This component is formed of a standard form-group with some of it's elements carriying additional ids/classes.

Usage

Dependencies

To get the tag-group component working, include the dependencies in your project in the following order:

"design-system": "git+ssh://git@github.com/Selectra-Dev/design-system.git"

@import 'design-system/src/scss/01-atoms/icon';
@import 'design-system/src/scss/01-atoms/form';
@import 'design-system/src/scss/01-atoms/badge';
@import 'design-system/src/scss/01-atoms/autocomplete';
@import 'design-system/src/scss/02-molecules/tag-group';

import tagGroup from 'design-system/src/js/02-molecules/tag-group';

Basic code

The tag-group is composed of a form-group to wich we have to add some extra id and classes. It has to be initialized via Javascript.

The topmost div element which carries the form-group class, also needs to have the tag-group class, and a unique ID.

The div which contains the input and the button elements, has to have the class tag-group__input-group.

The input element has to have the class tag-group__input. And an unique ID formed by concatenating __input to the ID we assigned previously to the topmost element.

🧐 Remember: Set the value of the label element for attribute to the same ID the input element has.

The button element need to have the class tag-group__btn.

<div class="form-group tag-group" id="tagGroup1">
  <label class="form-group__label" for="tagGroup1__input">Test this input:</label>
  <div class="form-group__item-addon tag-group__input-group">
    <input class="form-group__item tag-group__input" id="tagGroup1__input" type="text" placeholder="Test me!" />
    <button class="btn btn--secondary form-group__addon-btn tag-group__btn" type="button">Add tag</button>
  </div>
</div>

#tagGroup1.form-group.tag-group
  label.form-group__label(for='tagGroup1__input') Test this input:
  .form-group__item-addon.tag-group__input-group
    input#tagGroup1__input.form-group__item.tag-group__input(type='text', placeholder='Test me!')
    button.btn.btn--secondary.form-group__addon-btn.tag-group__btn(type='button', disabled='true') Add tag

new TagGroup({
  baseId: 'tagGroup1',
  inputTest: /\S/,
  maxTags: 3,
  autoConfig: {
    selector: '#tagGroup1__input',
    urlToFetch: 'https://restcountries.eu/rest/v2/name/{param}?fields=name;',
  }
});