Tag Group
Selectable tags built from
Badges wrapping a hidden
<input type="checkbox"> or
<input type="radio">.
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.
<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.
<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
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.
<label
><input type="checkbox" disabled /><span class="badge"
>Engineering</span
></label
>