Skip to content
DisplayBrowse display components
ComponentsDisplayStable

Tag / Chip

Removable tags with optional remove button. Pair with .lm-tag-input for chip-input fields.

Live preview

enterpriseannualpriority-1

Usage

Adapters:React stableVue stable
index.html
<span class="lm-tag lm-tag-removable">
  enterprise
  <button class="lm-tag-remove" aria-label="Remove enterprise">×</button>
</span>

CSS classes (4)

ClassDescription
lm-tagBase chip
lm-tag-removableAdjusts padding for the remove button
lm-tag-removeCircular dismiss button
lm-tag-inputInput field that hosts tags + a typeahead input

React props (2)

PropTypeDefaultDescription
removablebooleanShow remove button
onRemove() => voidRemove callback

Accessibility

  • Remove button must include aria-label='Remove {tag}'.
  • Backspace from empty tag input removes the previous tag.

Spotted something wrong? Edit this entry on GitHub.