<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-invalid" placeholder="Voeg namen toe">
<div class="invalid-feedback d-inline-block"><strong>Tagsinput field is invalid</strong></div>
</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": true,
"valid": false,
"feedback_message": "Tagsinput field is invalid",
"show_feedback": true,
"disabled": false,
"placeholder": "",
"filled": true
}
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.
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.
When overflow occures in the input field it is possible to grab the tags and drag them from right to left and vice versa.
When overflow occures in the input field it is possible to scroll throught the tags from right to left and vice versa.
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.
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