Taglist | One Design

Code example

The example below only reflects the styled of the taglist, you'll still need to provide the interaction of adding and deleting the tags yourselves.

Example

Labels

1
2
3
4
5
6
7
8
<div class="ox-form__group">
    <label for="task-labels" class="ox-form__label">Labels</label>
    <div class="ox-form__taglist">
        <button class="ox-form__taglist_tag ox-tag" title="Remove item: Q.Rent">Q.Rent <span class="ox-tag__icon ox-icon ox-icon--close ox-icon--small"></span></button>
        <button class="ox-form__taglist_tag ox-tag" title="Remove item: Urgent">Urgent <span class="ox-tag__icon ox-icon ox-icon--close ox-icon--small"></span></button>
        <input type="text" id="task-labels" class="ox-form__taglist__field" size="15" placeholder="Add labels">
    </div>
</div>