2.39 #Components.tags Tags

Toggle example guides Toggle HTML markup

Tags component

Browser support: IE9+ (no transition), Safari6+, Firefox30+, Chrome30+

Markup
<div class="sb-tags sb-tags--positive">
  <input class="sb-tags__input" type="checkbox" id="tag-positive-1">
  <label class="sb-tags__label" for="tag-positive-1">attractive</label>
  <input class="sb-tags__input" type="checkbox" id="tag-positive-2">
  <label class="sb-tags__label" for="tag-positive-2">usable</label>
  <input class="sb-tags__input" type="checkbox" id="tag-positive-3">
  <label class="sb-tags__label" for="tag-positive-3">interesting</label>
</div>
<div class="sb-tags sb-tags--negative">
  <input class="sb-tags__input" type="checkbox" id="tag-negative-1">
  <label class="sb-tags__label" for="tag-negative-1">unattractive</label>
  <input class="sb-tags__input" type="checkbox" id="tag-negative-2">
  <label class="sb-tags__label" for="tag-negative-2">complex</label>
  <input class="sb-tags__input" type="checkbox" id="tag-negative-3">
  <label class="sb-tags__label" for="tag-negative-3">boring</label>
</div>
Source: components/_tags.scss, line 3