Tags editor
Tags editor is a component that is used for editing clickable elements (previously known as tags).
Examples and usage
Tags editor with dropdown and only deletable tags
This tags editor contains only deletable tags. Once user starts typing tags into the input field, the autocomplete dropdowns opens.
<div class="tags-editor tags-editor--deletable card">
<div class="card__heading">
<h3>Tags</h3>
</div>
<div class="card__content">
<div class="tag-editable"><span class="searchable" data-gtm="people-profile-widgets-tag" data-searchable-prefix="prefix" data-searchable-string="value"><span>VIP</span></span><i class="fal fa-times deletable"></i></div>
<div class="tag-editable"><span class="searchable" data-gtm="people-profile-widgets-tag" data-searchable-prefix="prefix" data-searchable-string="value"><span>newsletter</span></span><i class="fal fa-times deletable"></i></div>
<div class="dropdown js-dropdown mb3">
<span><input class="js-toggle arrow-caret icon-after toggle" type="text" value="Tag text"></span>
<ul class="js-toggle-content toggle-content">
<li><span>Type to receive suggestions</span></li>
</ul>
</div>
</div>
</div>Tags editor with selectbox and draggable tags
This tags editor contains tags that are both - deletable and draggable. User can select the tags from the selectbox.
<div class="tags-editor tags-editor--draggable card">
<div class="card__heading">
<h3>Tags</h3>
</div>
<div class="card__content">
<div class="form-group">
<select>
<option value="" selected="" disabled="" hidden="">Select language</option>
<option>Czech</option>
<option>Norwegian</option>
<option>Polish</option>
</select>
</div>
<div class="tag-editable"><span class="searchable" data-gtm="people-profile-widgets-tag" data-searchable-prefix="prefix" data-searchable-string="value"><span><i class="fal fa-arrows draggable"></i>VIP</span></span><i class="fal fa-times deletable"></div>
<div class="tag-editable"><span class="searchable" data-gtm="people-profile-widgets-tag" data-searchable-prefix="prefix" data-searchable-string="value"><span><i class="fal fa-arrows draggable"></i></i>newsletter</span></span><i class="fal fa-times deletable"></div>
</div>
</div>Tags editor with selectbox and non-draggable tags
This tags editor contains only deletable tags. User can select the tags from the selectbox.
<div class="tags-editor tags-editor--deletable card">
<div class="card__heading">
<h3>Tags</h3>
</div>
<div class="card__content">
<div class="form-group">
<select>
<option value="" selected="" disabled="" hidden="">Select language</option>
<option>Czech</option>
<option>Norwegian</option>
<option>Polish</option>
</select>
</div>
<div class="tag-editable"><span class="searchable" data-gtm="people-profile-widgets-tag" data-searchable-prefix="prefix" data-searchable-string="value"><span>VIP</span></span><i class="fal fa-times deletable"></i></div>
<div class="tag-editable"><span class="searchable" data-gtm="people-profile-widgets-tag" data-searchable-prefix="prefix" data-searchable-string="value"><span>newsletter</span></span><i class="fal fa-times deletable"></i></div>
</div>
</div>