Kleine interaktive Elemente für Personen, Orte, Tags oder Werte – kombiniert mit einem Eingabefeld ideal für Mehrfachwerte wie Kenntnisse, Kategorien oder E-Mail-Empfänger.

Chips ähneln den bekannten Badges, unterscheiden sich aber in wichtigen Punkten:

• Interaktiv: Chips reagieren auf Klick und Tastatur, Badges sind statisch.
• Feste Größe: Chips skalieren nicht mit der font-size des Elternelements.
• Ausstattung: Icons, Avatare und Entfernen-Buttons sind möglich.
• Farben: einzeln oder als Gruppe am Container über .theme-*; normal mit den Tokens subtle/text, aktiv mit bg/contrast.
• Zustände: aktiv oder deaktiviert; beim Aktivieren per Klick erhalten Chips automatisch den Fokus.
• Tastatur: Im .chip-input sind Navigation und Auswahl per Tastatur möglich.

Quelle: Bootstrap-Dokumentation (englisch), übersetzt und bearbeitet. Doku lizenziert unter CC BY 3.0.

Chips

Für einzelne Chips nimmst du .chip. .chip-icon ergänzt ein führendes Icon, .chip-img ein Bild wie einen Avatar und .chip-dismiss einen Entfernen-Button. Das Schließen-Icon ist ein Inline-SVG, das du frei anpassen kannst; per JavaScript lässt sich über die Option dismissIcon ein eigenes SVG übergeben.

Einfacher Chip Mit Avatar Mit Icon Entfernbar

<span class="chip">Einfacher Chip</span>

<span class="chip">
  <img src="https://github.com/mdo.png" class="chip-img" width="16" height="16" alt="">
  Mit Avatar
</span>

<span class="chip">
  <span class="chip-icon">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
      <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6"/>
    </svg>
  </span>
  Mit Icon
</span>

<span class="chip">
  Entfernbar
  <button type="button" class="chip-dismiss" aria-label="Entfernen">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="4" y1="4" x2="12" y2="12"/><line x1="12" y1="4" x2="4" y2="12"/></svg>
  </button>
</span>

Farbige Chips

Mit .theme-*-Klassen färbst du Chips ein. Im Normalzustand sind sie dezent gehalten, damit sich der aktive Zustand deutlich abhebt.

<span class="chip">Standard</span>
<span class="chip theme-primary">Primär</span>
<span class="chip theme-accent">Akzent</span>
<span class="chip theme-success">Erfolg</span>
<span class="chip theme-danger">Gefahr</span>
<span class="chip theme-warning">Warnung</span>
<span class="chip theme-info">Info</span>
<span class="chip theme-inverse">Invertiert</span>
<span class="chip theme-secondary">Sekundär</span>

Aktiver Zustand

.active schaltet auf die kräftige Darstellung (bg/contrast) – praktisch für Chips, die sich wie Umschalter verhalten.

<span class="chip theme-primary">Standard</span>
<span class="chip theme-primary active">Aktiv</span>
<span class="chip theme-success">Standard</span>
<span class="chip theme-success active">Aktiv</span>

Chip-Input

Chips plus Ghost-Input in einem .chip-input ergeben ein Tag-Eingabefeld; data-bs-chips aktiviert das JavaScript. Ohne Theme sind die Chips grau und aktiv in Primärblau – eine Theme-Farbe am Container färbt alle enthaltenen Chips ein.

Tippe unten etwas ein und bestätige mit Enter oder ,, um einen Chip anzulegen. Mit Backspace oder Entf entfernst du Chips. Details stehen unter Tastatursteuerung.

<div class="chip-input" data-bs-chips>
  <label class="chip-input-label" for="skillsInput">Kenntnisse:</label>
  <span class="chip">
    JavaScript
  </span>
  <span class="chip">
    TypeScript
  </span>
  <input type="text" class="form-ghost" id="skillsInput" placeholder="Weitere hinzufügen…" />
</div>

Farbvarianten

Eine .theme-*-Klasse am .chip-input überträgt die Farbe auf alle Chips darin.

<div class="chip-input theme-primary" data-bs-chips>
  <span class="chip">Freigegeben</span>
  <span class="chip">Geprüft</span>
  <input type="text" class="form-ghost" placeholder="Status hinzufügen...">
</div>

<div class="chip-input theme-danger" data-bs-chips>
  <span class="chip">Bug</span>
  <span class="chip">Kritisch</span>
  <input type="text" class="form-ghost" placeholder="Problem hinzufügen">
</div>

Einzelne Chips kannst du auch direkt mit einer eigenen .theme-*-Klasse versehen.

<div class="chip-input theme-primary" data-bs-chips>
  <span class="chip theme-warning">Bug</span>
  <span class="chip theme-danger">Kritisch</span>
  <input type="text" class="form-ghost" placeholder="Problem hinzufügen">
</div>

Leerer Zustand

Du kannst auch nur mit dem Ghost-Input starten – die Chips entstehen beim Tippen.

<div class="chip-input theme-primary" data-bs-chips>
  <input type="text" class="form-ghost" placeholder="Eingeben und Enter drücken">
</div>

Mit Label

Ein Formular-Label verbessert die Barrierefreiheit.

<div class="form-field">
  <label class="form-label" for="skillsInputLabel">Kenntnisse</label>
  <div class="chip-input theme-primary" data-bs-chips>
    <span class="chip">
      React
      <button type="button" class="chip-dismiss" aria-label="Entfernen">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="4" y1="4" x2="12" y2="12"/><line x1="12" y1="4" x2="4" y2="12"/></svg>
      </button>
    </span>
    <input type="text" class="form-ghost" id="skillsInputLabel" placeholder="Kenntnis hinzufügen...">
  </div>
  <div class="form-text">Mit Enter oder Komma fügst du eine Kenntnis hinzu.</div>
</div>

Deaktiviert

Deaktivierst du den Ghost-Input und die Entfernen-Buttons, lassen sich weder neue Chips anlegen noch bestehende bearbeiten.

<div class="chip-input theme-primary" data-bs-chips>
  <span class="chip">
    Nur lesen
    <button type="button" class="chip-dismiss" aria-label="Entfernen" disabled>
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="4" y1="4" x2="12" y2="12"/><line x1="12" y1="4" x2="4" y2="12"/></svg>
    </button>
  </span>
  <input type="text" class="form-ghost" placeholder="Deaktiviert..." disabled>
</div>

Verwendung

Per Data-Attribute

data-bs-chips am Container initialisiert die Komponente automatisch. Optionen übergibst du ebenfalls als Data-Attribute.

<div class="chip-input theme-primary" data-bs-chips data-bs-separator="," data-bs-allow-duplicates="false">
  <input type="text" class="form-ghost" placeholder="Add tags...">
</div>

Per JavaScript

const chipInputElement = document.querySelector('.chip-input')
const chips = new bootstrap.Chips(chipInputElement, {
  separator: ',',
  maxChips: 5
})

Optionen

Optionen lassen sich per Data-Attribut oder JavaScript übergeben.

Methoden

const chipInputElement = document.querySelector('.chip-input')
const chips = bootstrap.Chips.getOrCreateInstance(chipInputElement)

// Add chips programmatically
chips.add('JavaScript')
chips.add('TypeScript')

// Get all values
console.log(chips.getValues()) // ['JavaScript', 'TypeScript']

// Remove a specific chip
chips.remove('JavaScript')

// Clear all chips
chips.clear()

Events

const chipInputElement = document.querySelector('.chip-input')

chipInputElement.addEventListener('add.bs.chips', event => {
  console.log('Adding chip:', event.value)

  // Validate and optionally prevent
  if (event.value.length < 2) {
    event.preventDefault()
  }
})

chipInputElement.addEventListener('remove.bs.chips', event => {
  console.log('Removing chip:', event.value)
})

chipInputElement.addEventListener('change.bs.chips', event => {
  console.log('Current values:', event.values)
  // Sync with hidden input or state
})

chipInputElement.addEventListener('select.bs.chips', event => {
  console.log('Selected:', event.selected)
})

Tastatursteuerung

Chip-Inputs lassen sich wie das Empfängerfeld in Apple Mail per Tastatur bedienen, inklusive Mehrfachauswahl.

Wenn der Input fokussiert ist

Wenn ein Chip fokussiert ist

Mausauswahl

• Verknüpfe den Chip-Input mit einem <label>, damit Screenreader das Feld benennen können.
• Chips sind fokussierbar und vollständig per Tastatur bedienbar.
• Jeder .chip-dismiss-Button trägt ein aria-label (im Original „Remove“, hier „Entfernen“).
• Ausgewählte Chips erhalten zur visuellen Kennzeichnung die Klasse .active.
• Hinzugefügte und entfernte Chips werden angesagt.

CSS-Variablen und Sass-Tokens für Chip und Chip-Input findest du in der Originaldokumentation.