Tags

Tags are used to label, organize, or categorize content. Tags can be used as a method of filtering data or to show items within a particular category.

Types

Filter tag

Filter tags are used to display quick and useful category labels to the user. They are often used to display categories or active filters.

HTML code snippet

<ul class="o-multiselect_choices"><li data-option="option1"><button type="button"><label for="test_select__multiple-option1">Option 1<svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg cf-icon-svg__error" viewBox="0 0 12 19"><path d="M11.383 13.644A1.03 1.03 0 0 1 9.928 15.1L6 11.172 2.072 15.1a1.03 1.03 0 1 1-1.455-1.456l3.928-3.928L.617 5.79a1.03 1.03 0 1 1 1.455-1.456L6 8.261l3.928-3.928a1.03 1.03 0 0 1 1.455 1.456L7.455 9.716z"></path></svg></label></button></li><li data-option="option4"><button type="button"><label for="test_select__multiple-option4">Option 4<svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg cf-icon-svg__error" viewBox="0 0 12 19"><path d="M11.383 13.644A1.03 1.03 0 0 1 9.928 15.1L6 11.172 2.072 15.1a1.03 1.03 0 1 1-1.455-1.456l3.928-3.928L.617 5.79a1.03 1.03 0 1 1 1.455-1.456L6 8.261l3.928-3.928a1.03 1.03 0 0 1 1.455 1.456L7.455 9.716z"></path></svg></label></button></li></ul>

Behavior

  • To clear a selection, click the “x” icon inside of the filter tag.
Edit page