Fijn

Tagsinput field group component: Valid 

<div class="form-group d-flex flex-wrap">
    <label class="flex-grow-1">Aanwezigen</label>
    <input type="text" value="Ruerd Visser,Tjitte Bouma,Mathijs Bannink,Annemarie Simons,Camille Casselman" class="js-tagsinput cursor-pointer form-control is-valid" placeholder="Voeg namen toe">

</div>
 
<div class="form-group d-flex flex-wrap">
    <label class="flex-grow-1">{{label}}</label>
    {% render '@tagsinput', {label:label, disabled:disabled, invalid:invalid, valid:valid, filled:filled}, true %}
    {% if show_feedback %}<div class="{% if valid %}valid-feedback{% endif %}{% if invalid %}invalid-feedback{% endif %}{% if feedback_message %} d-inline-block{% endif %}"><strong>{{feedback_message}}</strong></div>{% endif %}
</div>
 
{
  "label": "Aanwezigen",
  "invalid": false,
  "valid": true,
  "feedback_message": "Tagsinput field is invalid",
  "show_feedback": false,
  "disabled": false,
  "placeholder": "",
  "filled": true
}

Validatie

When a field is invalid or valid, the class .is-invalid or .is-valid should be added to the field. If a feedback message should be displayed please look at the following example:

<input type="text" value="Ruerd Visser,Tjitte Bouma,Mathijs Bannink,Annemarie Simons,Camille Casselman" class="js-tagsinput cursor-pointer form-control is-invalid" placeholder="Voeg namen toe">

It is also possible to already add the feedback div to the HTML before the message is displayed to the user. This is because the .invalid-feedback or .valid-feedback are hidden by default. By adding the class .d-inline-block it will be visible.

Initial colors

Each tag that is added to the input field contains a avatar element right before it with the initial. For each letter in the alpabet the defined color will be used as mentioned in the Avatar colors documentation. Any other character will contain a random color used from the color list.

Drag event

When overflow occures in the input field it is possible to grab the tags and drag them from right to left and vice versa.

Scroll event

When overflow occures in the input field it is possible to scroll throught the tags from right to left and vice versa.

Keycodes for adding tags

It is possible to add a tag when typing in the input by hitting enter, comma or tab. Also clicking outside the input field will add a tag.

Removing tags

It is possible to remove a tag by using backspace or by clicking on the remove icon (cross).

The following javascript library is used for the tagsinput component: https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/ https://github.com/bootstrap-tagsinput/bootstrap-tagsinput