Skip to main content

Overview

Chips represent complex entities in small blocks, such as tags, contacts, categories, and removable filters. The .chip-input-container lets users type new tags dynamically with Enter or comma, or remove them with Backspace.

Static & Removable Chips

Default Chip Primary Success Warning Danger
JavaScript Sass / SCSS HTML5 
<span class="chip chip-primary">
  <span>JavaScript</span>
  <button type="button" class="chip-remove" aria-label="Remove tag">&times;</button>
</span>

Interactive Tag Input

Type keywords and press Enter or , to convert them into removable chips. Press Backspace when empty to delete the last chip.

Design Systems Mobile-First 
<div class="chip-input-container" data-boodoo="chip-input">
  <span class="chip">
    <span>Design Systems</span>
    <button type="button" class="chip-remove" aria-label="Remove tag">&times;</button>
  </span>
  <input type="text" class="chip-input-field" id="tagInputField" name="tags" placeholder="Add tag...">
</div>