Vue Bootstrap Chip Component

Chip with Bootstrap Styling

Bootstrap 5 components designed for Vue.js

This component is part of the CoreUI for Vue.js UI components library, which offers all Bootstrap components designed to work seamlessly with Vue.js.

If you want to use Bootstrap 5 in a Vue.js environment while also needing advanced components that Bootstrap does not offer and dedicated developer support, then this library is the best solution for you.

Learn how to use CoreUI’s Vue Chip component with Bootstrap styles for flexible, framework-consistent UI.

On this page

Overview

The CoreUI Vue Chip component lets you build compact, interactive UI elements for labels, tags, filters, and selections. Chips support icons, avatars, removal, keyboard navigation, and theme-aware styling.

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 and do not 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 Vue 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 CChip for standalone chips.

vue

<template>
  <div class="d-flex gap-3 flex-wrap">
    <CChip>Default</CChip>
    <CChip theme="primary">Primary</CChip>
    <CChip theme="secondary">Secondary</CChip>
    <CChip theme="success">Success</CChip>
    <CChip theme="danger">Danger</CChip>
    <CChip theme="warning">Warning</CChip>
    <CChip theme="info">Info</CChip>
  </div>
</template>

<script setup>
import { CChip } from '@coreui/vue'
</script>

Outline chips

Use variant="outline" to remove all background images and colors on any chip.

vue

<template>
  <div class="d-flex gap-3 flex-wrap">
    <CChip variant="outline">Default</CChip>
    <CChip variant="outline" theme="primary">Primary</CChip>
    <CChip variant="outline" theme="secondary">Secondary</CChip>
    <CChip variant="outline" theme="success">Success</CChip>
    <CChip variant="outline" theme="danger">Danger</CChip>
    <CChip variant="outline" theme="warning">Warning</CChip>
    <CChip variant="outline" theme="info">Info</CChip>
  </div>
</template>

<script setup>
import { CChip } from '@coreui/vue'
</script>

Chips with icons

Wrap CIcon from @coreui/icons-vue in a <span class="chip-icon"> to render a leading icon.

vue

<template>
  <div class="d-flex gap-3 flex-wrap">
    <CChip theme="primary">
      <span class="chip-icon">
        <CIcon :icon="cilUser" />
      </span>
      User
    </CChip>
    <CChip theme="success">
      <span class="chip-icon">
        <CIcon :icon="cilCheckCircle" />
      </span>
      Verified
    </CChip>
    <CChip theme="danger">
      <span class="chip-icon">
        <CIcon :icon="cilXCircle" />
      </span>
      Error
    </CChip>
    <CChip theme="warning">
      <span class="chip-icon">
        <CIcon :icon="cilWarning" />
      </span>
      Warning
    </CChip>
  </div>
</template>

<script setup>
import { CChip } from '@coreui/vue'
import { CIcon } from '@coreui/icons-vue'
import { cilUser, cilCheckCircle, cilXCircle, cilWarning } from '@coreui/icons'
</script>

Chips with avatars

Use .chip-img for an image-like avatar or combine CChip with CAvatar.

vue

<template>
  <div class="d-flex gap-3 flex-wrap">
    <CChip theme="primary">
      <CAvatar theme="primary">J</CAvatar>
      John Doe
    </CChip>
    <CChip theme="secondary">
      <CAvatar src="/assets/img/avatars/1.jpg" />
      Jane Smith
    </CChip>
    <CChip theme="success">
      <CAvatar theme="success">A</CAvatar>
      Alice Brown
    </CChip>
  </div>
</template>

<script setup>
import { CAvatar, CChip } from '@coreui/vue'
</script>

Variants

Use color to apply theme color variants to your chips. Chips are subtle by default as this allows for a clear, themed active state.

vue

<template>
  <div class="d-flex flex-wrap gap-1">
    <template v-for="color in colors" :key="color">
      <CChip :theme="color" clickable>{{ label(color) }} chip</CChip>
      <CChip :theme="color" selected>{{ label(color) }} chip</CChip>
    </template>
  </div>
</template>

<script setup>
import { CChip } from '@coreui/vue'

const colors = ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'inverse']
const label = (color) => color.charAt(0).toUpperCase() + color.slice(1)
</script>

Combine variant="outline" with a color for outline color variants.

vue

<template>
  <div class="d-flex flex-wrap gap-1">
    <template v-for="color in colors" :key="color">
      <CChip variant="outline" :theme="color" clickable>{{ label(color) }} chip</CChip>
      <CChip variant="outline" :theme="color" selected>{{ label(color) }} chip</CChip>
    </template>
  </div>
</template>

<script setup>
import { CChip } from '@coreui/vue'

const colors = ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'inverse']
const label = (color) => color.charAt(0).toUpperCase() + color.slice(1)
</script>

Sizes

Use size="sm" or size="lg" for different sizes.

vue

<template>
  <div class="d-flex gap-3 align-items-center flex-wrap">
    <CChip size="sm" theme="primary">Small</CChip>
    <CChip theme="primary">Default</CChip>
    <CChip size="lg" theme="primary">Large</CChip>
  </div>
</template>

<script setup>
import { CChip } from '@coreui/vue'
</script>

Active state

Add selected to make chips use the solid appearance. On a chip that is not selectable or filter it only renders the active class — no toggle behaviour and no ARIA state.

vue

<template>
  <div class="d-flex gap-3 flex-wrap">
    <CChip theme="primary">Inactive</CChip>
    <CChip theme="primary" selected>Active</CChip>
    <CChip variant="outline" theme="primary">Inactive Outline</CChip>
    <CChip variant="outline" theme="primary" selected>Active Outline</CChip>
  </div>
</template>

<script setup>
import { CChip } from '@coreui/vue'
</script>

Interactive chips

Clickable

Enable interactive hover styling and pointer cursor with the clickable prop.

vue

<template>
  <div class="d-flex gap-3 flex-wrap">
    <CChip clickable theme="primary">Click me</CChip>
    <CChip clickable theme="secondary">Hover effect</CChip>
  </div>
</template>

<script setup>
import { CChip } from '@coreui/vue'
</script>

Selectable

Use selectable to enable selection behavior. Chips become keyboard-navigable and toggle on click or Enter/Space.

vue

<template>
  <div>
    <div class="d-flex gap-3 flex-wrap mb-4">
      <CChip
        v-for="(chip, index) in chips"
        :key="index"
        selectable
        :selected="chip.selected"
        theme="primary"
        @selected-change="(selected) => (chip.selected = selected)"
      >
        {{ chip.label }}
      </CChip>
    </div>

    <p class="fg-2 small">Selected: {{ selectedChips.join(', ') || 'None' }}</p>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { CChip } from '@coreui/vue'

const chips = ref([
  { label: 'Option 1', selected: false },
  { label: 'Option 2', selected: false },
  { label: 'Option 3', selected: false },
  { label: 'Option 4', selected: false },
])

const selectedChips = computed(() =>
  chips.value.filter((chip) => chip.selected).map((chip) => chip.label)
)
</script>

Remove button

If removable is enabled, the remove button is rendered automatically.

vue

<template>
  <div>
    <div class="d-flex gap-3 flex-wrap">
      <CChip
        v-for="(tag, index) in tags"
        :key="index"
        removable
        theme="primary"
        @remove="removeTag(index)"
      >
        {{ tag }}
      </CChip>
    </div>

    <CButton v-if="tags.length === 0" size="sm" theme="secondary" class="mt-4" @click="resetTags">
      Reset Tags
    </CButton>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { CChip, CButton } from '@coreui/vue'

const tags = ref(['Vue.js', 'TypeScript', 'CoreUI', 'Components'])

const removeTag = (index) => {
  tags.value.splice(index, 1)
}

const resetTags = () => {
  tags.value = ['Vue.js', 'TypeScript', 'CoreUI', 'Components']
}
</script>

Custom remove icon

Replace the default remove icon with a custom icon.

vue

<template>
  <div class="d-flex gap-3 flex-wrap">
    <CChip removable theme="primary">
      <template #removeIcon>
        <CIcon :icon="cilTrash" />
      </template>
      Custom icon
    </CChip>
  </div>
</template>

<script setup>
import { CChip } from '@coreui/vue'
import { CIcon } from '@coreui/icons-vue'
import { cilTrash } from '@coreui/icons'
</script>

Disabled

Disable chips to prevent interaction.

vue

<template>
  <div class="d-flex gap-3 flex-wrap">
    <CChip disabled>Disabled</CChip>
    <CChip disabled theme="primary">Disabled Primary</CChip>
    <CChip disabled selectable theme="success">Disabled Selectable</CChip>
    <CChip disabled removable theme="danger">Disabled Removable</CChip>
  </div>
</template>

<script setup>
import { CChip } from '@coreui/vue'
</script>

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 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, 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 button	Close chip (only when `removable` is enabled)