Chips

Small interactive elements for people, places, tags or values, and a chip input for multi-value fields like skills, categories or email recipients.

Bootstrap’s chips docs describe the markup and CSS.

Chips

Use bsChip for standalone chips. Add .chip-icon for a leading icon, .chip-img for an image like an avatar, and a bsChipDismiss button to make it removable. Name the chip in the button’s aria-label.

Basic chip With icon Dismissible

<div class="d-flex flex-wrap gap-2">
  <span bsChip>Basic chip</span>
  <span bsChip>
    <span class="chip-icon">
      <svg width="16" height="16" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
        <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>
    With icon
  </span>
  @if (!dismissed()) {
    <span bsChip>
      Dismissible
      <button
        type="button"
        bsChipDismiss
        aria-label="Remove Dismissible"
        (click)="dismissed.set(true)"></button>
    </span>
  }
</div>

Themed chips

Set theme to color a chip. Chips are subtle by default, which leaves room for a clear active state.

DefaultPrimaryAccentSuccessDangerWarningInfoSecondary

HTML

<div class="d-flex flex-wrap gap-2">
  <span bsChip>Default</span>
  <span bsChip theme="primary">Primary</span>
  <span bsChip theme="accent">Accent</span>
  <span bsChip theme="success">Success</span>
  <span bsChip theme="danger">Danger</span>
  <span bsChip theme="warning">Warning</span>
  <span bsChip theme="info">Info</span>
  <span bsChip theme="secondary">Secondary</span>
</div>

Active state

Set active for the solid appearance, for example for toggle-style chip filters. Use buttons with aria-pressed for chips people can toggle.

<div class="d-flex flex-wrap gap-2">
  @for (filter of filters(); track filter.name) {
    <button
      type="button"
      bsChip
      theme="primary"
      [active]="filter.active"
      [attr.aria-pressed]="filter.active"
      (click)="toggle(filter.name)">
      {{ filter.name }}
    </button>
  }
</div>

Chip input

bsChipInput is a field of chips with a ghost input for adding more. Its value is a string[], bound with [formControl], [(ngModel)], [formField] or [(value)]. Type and press Enter or , to add a chip, and Backspace to remove one. See Keyboard behavior.

Skills

JavaScript TypeScript

Press Enter or comma to add a skill.

Value: JavaScript, TypeScript

<div bsFormField>
  <label bsFormLabel>Skills</label>
  <div bsChipInput theme="primary" placeholder="Add more…" [formControl]="skills"></div>
  <small bsFormText>Press Enter or comma to add a skill.</small>
</div>
<p class="mt-3 mb-0 fg-3">Value: {{ skills.value.join(', ') }}</p>

Theme variants

Set theme on the chip input to color every chip in it. Give an input without a visible label an aria-label.

Approved Verified

Bug Critical

<div class="vstack gap-3">
  <div
    bsChipInput
    theme="primary"
    placeholder="Add status…"
    aria-label="Statuses"
    [(value)]="statuses"></div>
  <div
    bsChipInput
    theme="danger"
    placeholder="Add issue…"
    aria-label="Issues"
    [(value)]="issues"></div>
</div>

Empty state and limits

Start with no chips, and cap them with maxChips: the input is disabled once the limit is reached. Set separator to change the character that adds a chip, or to null to add chips with Enter only.

Recipients

Up to 3 recipients, separated with a semicolon.

<div bsFormField>
  <label bsFormLabel>Recipients</label>
  <div
    bsChipInput
    theme="primary"
    placeholder="Type and press Enter"
    separator=";"
    maxChips="3"
    [(value)]="recipients"></div>
  <small bsFormText>Up to 3 recipients, separated with a semicolon.</small>
</div>

Disabled

Disable the chip input with the disabled input or the form control. Chips can’t be added or removed.

Read only Locked

<div bsChipInput theme="primary" aria-label="Tags" [formControl]="tags"></div>

Validation

The chip input follows its form control’s validation state inside a bsFormField.

Topics

Add at least two topics.

<div bsFormField>
  <label bsFormLabel>Topics</label>
  <div bsChipInput theme="primary" placeholder="Add topic…" [formControl]="topics"></div>
  <div bsInvalidFeedback>Add at least two topics.</div>
</div>

Keyboard behavior

In the input: Enter or the separator adds a chip, Backspace in an empty input selects the last chip, ← at the start moves to the chips, and Escape clears the text. On a chip: ← → Home End move between chips (with Shift to extend the selection), Ctrl/⌘+A selects all, and Backspace or Delete removes the selected chips. Additions and removals are announced to screen readers. Pasting a, b, c adds three chips.

Apple Banana Cherry Date

<div
  bsChipInput
  theme="accent"
  placeholder="Add fruit…"
  aria-label="Fruits"
  [(value)]="fruits"></div>

API

BsChip

Selector: [bsChip] · Exported as: bsChip

Inputs

Name	Type	Default	Description
`theme`	`BsTheme \| null`	`null`	Theme color of the chip.
`active`	`boolean`	`false`	Solid appearance, for example for a selected chip.

BsChipDismiss

Selector: button[bsChipDismiss]

Inputs

Name	Type	Default	Description
`aria-label`	`string`	`'Remove'`	Accessible name of the button. Name the chip in it.

BsChipInput

Selector: div[bsChipInput] · Exported as: bsChipInput

Inputs

Name	Type	Default	Description
`value`	`string[]`	`[]`	The chips. Supports two-way binding with [(value)].
`theme`	`BsTheme \| null`	`null`	Theme color of the chips.
`separator`	`string \| null`	`','`	Character that adds a chip when typed. Enter always adds one.
`allowDuplicates`	`boolean`	`false`	Allows the same value more than once.
`maxChips`	`number \| null`	`null`	Maximum number of chips.
`placeholder`	`string`	`''`	Placeholder of the input.
`dismissible`	`boolean`	`true`	Shows a remove button on each chip.
`createOnBlur`	`boolean`	`true`	Adds the typed text as a chip when focus leaves the input.
`removeLabel`	`string`	`'Remove'`	Start of the remove buttons’ accessible names, followed by the chip.
`aria-label`	`string \| null`	`null`	Accessible name of the input, when it has no visible label.
`validation`	`'auto' \| 'valid' \| 'invalid' \| 'none'`	`'auto'`	Validation styles of the input.
`disabled`	`boolean`	`false`	Disables the control. Forms also disable it through the form control.

Outputs

Name	Type	Description
`valueChange`	`string[]`	Emits the chips when the user adds or removes one.

Methods

Name	Type	Description
`add(value)`	`boolean`	Adds a chip. Returns false for an empty value, a duplicate or when full.
`remove(value)`	`boolean`	Removes the first chip with the value.
`clear()`	`void`	Removes every chip.
`focus()`	`void`	Focuses the input.
`selected`	`Signal<ReadonlySet<number>>`	Indexes of the selected chips.