# 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`. - Chips support keyboard navigation and selection in their container. See examples of all of this in action below. ## 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 Apply `.chip-*` classes to color your chips. Chips are subtle by default as this allows for a clear, themed active state. ```html
Primary chip Primary chip Secondary chip Secondary chip Success chip Success chip Danger chip Danger chip Warning chip Warning chip Info chip Info chip
``` ```html
Primary chip Primary chip Secondary chip Secondary chip Success chip Success chip Danger chip Danger chip Warning chip Warning chip Info chip Info 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
``` ## Sizes Use `.chip-sm` or `.chip-lg` for different sizes. ```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
``` ## Chip component JavaScript plugin Use the Bootstrap Chip component JavaScript plugin for selection, keyboard navigation, and dismissal. You can initialize chip components via data attributes or JavaScript. ### 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: ```html Removable chip ``` ```html
Chip 1 Chip 2 Chip 3 Chip 4
``` ### 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.0, 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}'.

| Option | Type | Default | Description | | --- | --- | --- | --- | | `ariaRemoveLabel` | string | `'Remove'` | Accessible label for the remove button. | | `disabled` | boolean | `false` | Disables interactions and focus. You can also apply the `.disabled` class in markup. | | `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. | | `selectable` | boolean | `false` | Enables selection and keyboard selection behavior. | | `selected` | boolean | `false` | Sets the initial selected state when `selectable` is enabled. | ### Methods | Method | Description | | --- | --- | | `remove` | Removes the chip (fires `remove` and `removed` events). | | `deselect` | Deselects a selectable chip. | | `dispose` | Destroys a chip instance. (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)`. | | `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 | | --- | --- | | `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. | | `deselect.coreui.chip` | Fires immediately before a chip is deselected. Cancelable. | | `deselected.coreui.chip` | Fired after a chip is deselected. | ```js const myChip = document.getElementById('myChip') myChip.addEventListener('selected.coreui.chip', event => { // handle selection }) ``` ## Keyboard behavior Chips support keyboard navigation when they are `selectable` and/or `removable`. ### When a chip is focused | Key | Action | | --- | --- | | `Enter` / `Space` | Toggle selection (only when `selectable` is enabled) | | `Backspace` / `Delete` | Close chip when `removable` is enabled | | `←` | Move focus to previous chip | | `→` | Move focus to next chip | | `Home` | Move focus to the first chip in the container | | `End` | Move focus to the last chip in the container | ### 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. - `aria-selected` is kept in sync with `.active` on selectable chips. - `aria-disabled="true"` is applied to disabled chips. - Each `.chip-remove` button includes an accessible label via `ariaRemoveLabel`. - Use descriptive `aria-label` attributes on chip containers when the chip component group has a meaningful role (e.g., "Applied filters"). ## Customizing ### CSS variables Chips use local CSS variables on `.chip` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. ```scss --cui-chip-height: #{$chip-height}; --cui-chip-padding-x: #{$chip-padding-x}; --cui-chip-gap: #{$chip-gap}; --cui-chip-font-size: #{$chip-font-size}; --cui-chip-font-weight: #{$chip-font-weight}; --cui-chip-border-radius: #{$chip-border-radius}; --cui-chip-img-size: #{$chip-img-size}; --cui-chip-img-border-radius: #{$chip-img-border-radius}; --cui-chip-icon-size: #{$chip-icon-size}; --cui-chip-remove-size: #{$chip-remove-size}; --cui-chip-remove-opacity: #{$chip-remove-opacity}; --cui-chip-remove-hover-opacity: #{$chip-remove-hover-opacity}; --cui-chip-transition: #{$chip-transition}; --cui-chip-color: var(--cui-text-emphasis, #{$chip-color}); --cui-chip-bg: var(--cui-bg-subtle, #{$chip-bg}); --cui-chip-border-width: #{$chip-border-width}; --cui-chip-border-color: #{$chip-border-color}; --cui-chip-active-color: var(--cui-contrast, #{$chip-active-color}); --cui-chip-active-bg: var(--cui-color, #{$chip-active-bg}); --cui-chip-active-border-color: #{$chip-active-border-color}; --cui-chip-hover-color: var(--cui-contrast, #{$chip-hover-color}); --cui-chip-hover-bg: var(--cui-color, #{$chip-hover-bg}); --cui-chip-hover-border-color: #{$chip-hover-border-color}; ``` ### SASS variables ```scss $chip-font-size: .875rem; $chip-font-weight: $font-weight-normal; $chip-height: 1.75rem; $chip-padding-x: .625rem; $chip-gap: .3125rem; $chip-border-radius: var(--#{$prefix}border-radius-pill); $chip-icon-size: 1rem; $chip-img-size: 1.25rem; $chip-img-border-radius: 50%; $chip-remove-size: 1rem; $chip-remove-opacity: .65; $chip-remove-hover-opacity: 1; $chip-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, color .15s ease-in-out; $chip-color: var(--#{$prefix}body-color); $chip-bg: var(--#{$prefix}secondary-bg); $chip-border-width: var(--#{$prefix}border-width); $chip-border-color: transparent; $chip-active-color: rgba($white, .87); $chip-active-bg: var(--#{$prefix}primary); $chip-active-border-color: transparent; $chip-hover-color: $chip-color; $chip-hover-bg: color-mix(in srgb, var(--#{$prefix}secondary-bg) 95%, #000); $chip-hover-border-color: transparent; $chip-font-size-sm: .75rem; $chip-height-sm: 1.5rem; $chip-padding-x-sm: .625rem; $chip-gap-sm: .25rem; $chip-icon-size-sm: .875rem; $chip-img-size-sm: 1rem; $chip-remove-size-sm: .875rem; $chip-font-size-lg: 1rem; $chip-height-lg: 2rem; $chip-padding-x-lg: .75rem; $chip-gap-lg: .375rem; $chip-icon-size-lg: 1.25rem; $chip-img-size-lg: 1.5rem; $chip-remove-size-lg: 1.25rem; ```

CoreUI vs Bootstrap

While this Chip component is fully compatible with Bootstrap and follows its core principles, CoreUI delivers a more complete solution for modern app development.

What sets CoreUI apart from Bootstrap?

Whether you’re building internal tools, dashboards, or SaaS platforms — CoreUI combines the familiarity of Bootstrap with a more powerful, scalable, and production-ready ecosystem.

👉 Explore CoreUI Bootstrap Components
👉 Compare CoreUI vs Bootstrap