Tag Group

Selectable tags built from Badges wrapping a hidden <input type="checkbox"> or <input type="radio">.

Composed of

Badge: The look of each tag

Standalone

<link rel="stylesheet" href="https://esm.sh/@erikt/ui/tag-group.css" />

Checkbox (multi-select)

Use <input type="checkbox"> to let more than one tag be selected at once.

<div style="display: flex; gap: 0.5rem; flex-wrap: wrap">
  <label>
    <input type="checkbox" checked />
    <span class="badge">
      <svg><!-- palette --></svg> Design
    </span>
  </label>
  <label>
    <input type="checkbox" />
    <span class="badge">
      <svg><!-- code --></svg> Engineering
    </span>
  </label>
  <label>
    <input type="checkbox" checked />
    <span class="badge">
      <svg><!-- box --></svg> Product
    </span>
  </label>
  <label>
    <input type="checkbox" />
    <span class="badge">
      <svg><!-- speakerphone --></svg> Marketing
    </span>
  </label>
</div>

Radio (single-select)

Use <input type="radio"> with a shared name so only one tag can be selected.

Small Medium Large

<div style="display: flex; gap: 0.5rem; flex-wrap: wrap">
  <label
    ><input type="radio" name="size" checked /><span class="badge"
      >Small</span
    ></label
  >
  <label
    ><input type="radio" name="size" /><span class="badge">Medium</span></label
  >
  <label
    ><input type="radio" name="size" /><span class="badge">Large</span></label
  >
</div>

Colors

Any Badge color modifier works, including outlined.

Constructive Destructive Outlined

<label
  ><input type="checkbox" checked /><span class="badge constructive"
    >Constructive</span
  ></label
>
<label
  ><input type="checkbox" checked /><span class="badge destructive"
    >Destructive</span
  ></label
>
<label
  ><input type="checkbox" /><span class="badge color4 outlined"
    >Outlined</span
  ></label
>

In a field

Drop tags inside a Field for a labeled control with hint text.

Skills

Design Research Writing

Select all that apply.

<div class="field">
  <span>Skills</span>
  <div style="display: flex; gap: 0.5rem; flex-wrap: wrap">
    <label
      ><input type="checkbox" checked /><span class="badge">Design</span></label
    >
    <label><input type="checkbox" /><span class="badge">Research</span></label>
    <label
      ><input type="checkbox" checked /><span class="badge"
        >Writing</span
      ></label
    >
  </div>
  <small>Select all that apply.</small>
</div>

Disabled

Add disabled to the input to disable a single tag.

Design Engineering Product

<label
  ><input type="checkbox" disabled /><span class="badge"
    >Engineering</span
  ></label
>

API reference

Type	Classes / attributes	What it does
Disabled	`[disabled]`	Fades the tag and blocks input