# Bootstrap 6 Chip > Bootstrap Chip component for CoreUI — build removable tags, selectable labels, and filterable chips with icons, avatars, and full keyboard support. ## Overview The CoreUI **Bootstrap Chip component** lets you build compact, interactive UI elements for labels, tags, filters, and selections. Chips support icons, avatars, dismissal, keyboard navigation, and theming via CSS variables. Chips are similar to badges, but they have a single size and more defined visual styles useful for indicating state and selection. - Chips are statically sized—they don't scale with the parent element by default. - Chips can have icons, avatars, and remove buttons. - Chips can be active or disabled. - Chips automatically gain focus when they are `selectable` or `removable`. - A single chip handles its own selection and removal; group chips in a [Chip set](https://coreui.io/bootstrap/docs/components/chip-set/) for roving focus and arrow-key navigation. See examples of all of this in action below. > **Rendering more than one chip? Reach for the [Chip set](https://coreui.io/bootstrap/docs/components/chip-set/) component.** A standalone `.chip` is the building block for a single, independent chip. The Chip set is the recommended container for any group of chips — it instantiates the chips for you and manages selection, removal, and keyboard navigation (arrow keys, Home/End) across the whole set. The [Chip input](https://coreui.io/bootstrap/docs/forms/chip-input/) builds on it for tag-style text entry. ## When to use chips Use the Bootstrap Chip component when you need: - Multi-select filters in search or form interfaces - Removable tags for selected items or applied filters - Keyboard-navigable selection groups - Compact status indicators with icon or avatar support ## Basic chips Use `.chip` for standalone chips. ```html
Basic chip Basic chip 2 Basic chip 3 Basic chip 4
``` ## Outline chips Add `.chip-outline` to remove all background images and colors on any chip. ```html
Outline chip Outline chip 2 Outline chip 3 Outline chip 4
``` ## Chips with icons Add `.chip-icon` for a leading icon. ```html
Chip with icon 1 Chip with icon 2
``` ## Chips with avatars Add `.chip-img` for an image like an avatar or use our avatar component. ```html
Chip with avatar Chip with avatar 2 L Chip with avatar 3 L Chip with avatar 4
``` ## Variants Colour a chip with a [`.theme-*` class](https://coreui.io/bootstrap/docs/customize/components/#theme-variants), on the chip itself or on any element above it. Chips are subtle by default as this allows for a clear, themed active state. ```html
${c.title} chip ${c.title} chip
``` ```html
${c.title} chip ${c.title} chip
``` ### Active state Add `.active` to make chips use the solid appearance (bg/contrast). This is useful for toggle-style chip selections. ```html
Default Active Primary Active Success Active
``` ## Sizing Use `.chip-sm` or `.chip-lg` for different sizes. Chips placed in a `.form-control-sm` or `.form-control-lg` group — a multi select's selection, for example — take the matching size without a modifier. ```html
Small Small with icon Small with avatar L Small with avatar 2 Small removable
Default Default with icon 1 Default with avatar L Default with avatar1 Default removable
Large Small with icon 1 Large with avatar L Large with avatar 2 Large removable
``` ## JavaScript plugin Use the Bootstrap Chip component JavaScript plugin for selection and dismissal. You can initialize chip components via data attributes or JavaScript. To navigate between several chips with the arrow keys, group them in a [Chip set](https://coreui.io/bootstrap/docs/components/chip-set/). The options below can be configured per chip, but in practice you'll usually set them once on a [Chip set](https://coreui.io/bootstrap/docs/components/chip-set/): the set forwards `selectable`, `removable`, `disabled`, `removeIcon`, and `ariaRemoveLabel` to every chip it manages and instantiates them for you, so you don't have to add `data-coreui-chip` to each one. ### Data attributes Add `data-coreui-chip` to enable the plugin and configure behavior with `data-coreui-*` options. ```html
Selectable Removable Selected Disabled
``` ### JavaScript Initialize a chip directly and pass options: ```js const chip = document.querySelector('#myChip') coreui.Chip.getOrCreateInstance(chip, { selectable: true, removable: true }) ``` ### Remove button If `removable` is enabled, the plugin will add the remove button automatically. You can also provide your own markup; a button without an `aria-label` gets its name from `ariaRemoveLabel`: ```html Removable chip ``` ```html
Chip 1 Chip 2 Chip 3 Chip 4
``` > The chips above work independently. To get roving focus and arrow-key navigation across the group, wrap them in a [Chip set](https://coreui.io/bootstrap/docs/components/chip-set/) with `data-coreui-chip-set`, which also instantiates each chip for you. ### Options Options can be passed using data attributes or JavaScript. To do this, append an option name to `data-coreui-`, such as `data-coreui-animation="{value}"`. Remember to convert the case of the option name from "_camelCase_" to "_kebab-case_" when using data attributes. For instance, you should write `data-coreui-custom-class="beautifier"` rather than `data-coreui-customClass="beautifier"`. Starting with CoreUI 4.2.6, all components support an **experimental** reserved data attribute named `data-coreui-config`, which can contain simple component configurations as a JSON string. If an element has attributes `data-coreui-config='{"delay":50, "title":689}'` and `data-coreui-title="Custom Title"`, then the final value for `title` will be `Custom Title`, as the standard data attributes will take precedence over values specified in `data-coreui-config`. Moreover, existing data attributes can also hold JSON values like `data-coreui-delay='{"show":50, "hide":250}'`. | Name | Type | Default | Description | | --- | --- | --- | --- | | `allowList` | object | `SVGAllowlist` | Tags and attributes allowed in `removeIcon` and `selectedIcon`. The default list keeps the SVG markup the icons are drawn with. | | `ariaRemoveLabel` | string \| function | `'Remove'` | Names the remove button with the chip's text: a string has `{label}` replaced by it, or gets it appended when there is no `{label}` (`Remove React`); a function receives the text and returns the whole name. Unused on a selectable chip and inside a selectable [chip set](https://coreui.io/bootstrap/docs/components/chip-set/#accessibility), where the affordance is hidden from assistive technology. | | `disabled` | boolean | `false` | Disables interactions and focus. | | `filter` | boolean | `false` | Shows a check icon while the chip is selected (filter chip). Implies `selectable`. | | `removable` | boolean | `false` | Adds a remove button (or enables removal if it exists in markup). | | `removeIcon` | string | SVG | HTML string used as the remove icon. | | `sanitize` | boolean | `true` | Sanitizes `removeIcon` and `selectedIcon` before they are inserted. | | `sanitizeFn` | null, function | `null` | Sanitization function of your own, used instead of the built-in one. | | `selectable` | boolean | `false` | Enables selection and keyboard selection behavior. | | `selected` | boolean | `false` | Sets the initial selected state when `selectable` is enabled. | | `selectedIcon` | string | SVG | HTML string used as the check icon when `filter` is enabled. | ### Methods | Method | Description | | --- | --- | | `deselect` | Deselects a selectable chip. | | `dispose` | Destroys a chip instance and removes the remove button and the check icon it added. The classes, role, `tabindex` and ARIA attributes it wrote stay; a new instance writes them again from its options. (Removes stored data on the DOM element) | | `getInstance` | Static method to get the chip instance: `coreui.Chip.getInstance(element)`. | | `getOrCreateInstance` | Static method to get or create a chip instance: `coreui.Chip.getOrCreateInstance(element)`. | | `remove` | Removes the chip (fires `remove` and `removed` events). | | `select` | Selects a selectable chip. | | `toggle` | Toggles selection for a selectable chip. | ### Events All CoreUI chip events are fired from the chip element and bubble. | Event type | Description | | --- | --- | | `deselect.coreui.chip` | Fires immediately before a chip is deselected. Cancelable. | | `deselected.coreui.chip` | Fired after a chip is deselected. | | `remove.coreui.chip` | Fires immediately when `remove` is called. Cancelable. | | `removed.coreui.chip` | Fired after the chip has been removed from the DOM. | | `select.coreui.chip` | Fires immediately before a chip is selected. Cancelable. | | `selected.coreui.chip` | Fired after a chip is selected. | ```js const myChip = document.getElementById('myChip') myChip.addEventListener('selected.coreui.chip', event => { // handle selection }) ``` ## Keyboard behavior A standalone chip handles its own selection and removal from the keyboard when it is `selectable` and/or `removable`. Roving focus between chips (arrow keys, Home/End) is provided by the parent [Chip set](https://coreui.io/bootstrap/docs/components/chip-set/) container. ### When a chip is focused | Key | Action | | --- | --- | | `Enter` / `Space` | Toggle selection (only when `selectable` is enabled) | | `Backspace` / `Delete` | Close chip when `removable` is enabled | When chips are grouped in a [Chip set](https://coreui.io/bootstrap/docs/components/chip-set/), the arrow keys, Home, and End move focus between chips, and removing the focused chip moves focus to a neighboring chip, or to the set once no enabled chip is left. ### Mouse interaction | Action | Effect | | --- | --- | | Click chip | Toggle selection (only when `selectable` is enabled) | | Click remove | Close chip (only when `removable` is enabled) | ## Accessibility The Bootstrap Chip component follows WAI-ARIA patterns for interactive widgets, ensuring the chip component is fully usable with keyboards and assistive technologies. - Chips become focusable when `selectable` or `removable` is enabled. - A standalone selectable chip is exposed as a toggle button (`role="button"`) with `aria-pressed` kept in sync with `.active`. Inside a selectable [Chip set](https://coreui.io/bootstrap/docs/components/chip-set/) the set exposes a listbox and each chip becomes a `role="option"` with `aria-selected` instead. - `aria-disabled="true"` is applied to disabled chips that carry a role; a role-less chip conveys the state through the `disabled` class and its removed interactivity. - Each `.chip-remove` button is named with `ariaRemoveLabel` and the chip's text, `Remove ` by default, so every remove button in a set has its own name. A selectable chip is a `role="button"`, and inside a selectable [chip set](https://coreui.io/bootstrap/docs/components/chip-set/#accessibility) a `role="option"`; both get a `