Bootstrap 5 Chip Input

Overview

The CoreUI Bootstrap Chip Input component lets users enter multiple values as chips inside a single field. Use it as a tag input, multi-value selector, or token field for skills, categories, email recipients, and more. The chip input component supports keyboard-friendly entry, chip removal, and optional selection for bulk actions.

• Type values and press Enter (or a separator) to create chips.
• Chips can be removable and selectable.
• The input stays inline and grows as you type.
• Full form integration via a hidden input with configurable name.

When to use Chip Input

Use the Bootstrap Chip Input component when you need:

• A tag input or token field for free-form multi-value entry
• An email or recipient input where users add multiple addresses
• A skills or category selector in forms
• A filterable multi-select that integrates with standard HTML forms

Basic example

Wrap chips and add data-coreui-chip-input to enable behavior.

<div class="chip-input" data-coreui-chip-input data-coreui-name="chipInputBasicExample" data-coreui-placeholder="Add a skill...">
  <label class="chip-input-label" for="skillsInputBasic">Skills:</label>
  <span class="chip">JavaScript</span>
  <span class="chip">TypeScript</span>
  <span class="chip">Accessibility</span>
</div>

<div class="chip-input" data-coreui-chip-input data-coreui-placeholder="Add a skill...">
  <label class="chip-input-label" for="skillsInputBasic">Skills:</label>
  <span class="chip">JavaScript</span>
  <span class="chip">TypeScript</span>
  <span class="chip">Accessibility</span>
  <input type="text" class="chip-input-field" name="skillsInputBasic" placeholder="Add a skill...">
</div>

Variants

Use contextual chip classes inside Bootstrap 5 Chip Input to represent categories, status, or priority.

<div class="chip-input" data-coreui-chip-input data-coreui-name="issues" data-coreui-placeholder="Add label...">
  <span class="chip chip-primary">Feature</span>
  <span class="chip chip-success">Approved</span>
  <span class="chip chip-warning">Needs review</span>
  <span class="chip chip-danger">Blocking</span>
</div>

In the example below, the chip color is assigned dynamically based on the chip text using the chipClassName callback. Each value (e.g., Feature or Blocking) maps to a contextual class, so chips remain visually consistent even when added programmatically.

<div id="chipVariants" class="chip-input"></div>

The JavaScript below initializes the example:

const chipInputElement = document.querySelector('#chipVariants')
const chipInput = new coreui.ChipInput(chipInputElement, {
  // Class is resolved dynamically from chip value.
  chipClassName(value) {
    const variants = {
      approved: 'chip-success',
      blocking: 'chip-danger',
      feature: 'chip-primary',
      'needs review': 'chip-warning'
    }

    return variants[value.trim().toLowerCase()] || 'chip-secondary'
  },
  placeholder: 'Add a bug...'
})

chipInput.add('Feature')

Sizes

Use chip-input-sm and chip-input-lg to match surrounding form controls. Default size is provided by .chip-input without a size modifier.

<div class="chip-input chip-input-sm mb-3" data-coreui-chip-input data-coreui-placeholder="Add small tag...">
  <label class="chip-input-label" for="skillsInputSm">Small</label>
  <span class="chip">HTML</span>
</div>

<div class="chip-input mb-3" data-coreui-chip-input data-coreui-placeholder="Add default tag...">
  <label class="chip-input-label" for="skillsInputMd">Default</label>
  <span class="chip">JavaScript</span>
</div>

<div class="chip-input chip-input-lg" data-coreui-chip-input data-coreui-placeholder="Add large tag...">
  <label class="chip-input-label" for="skillsInputLg">Large</label>
  <span class="chip">TypeScript</span>
</div>

Empty state

Start with just the input and let users add chips as they type.

<div class="chip-input" data-coreui-chip-input data-coreui-name="tags" data-coreui-placeholder="Start typing tags..."></div>

With label

Use a standard form label for accessibility.

<div class="mb-3">
  <label class="form-label" for="techStackInput">Tech stack</label>
  <div class="chip-input" data-coreui-chip-input data-coreui-name="techStack" data-coreui-placeholder="Add package...">
    <span class="chip">Vue</span>
    <span class="chip">Vite</span>
  </div>
  <div class="form-text">Press Enter or comma to add a value.</div>
</div>

Disabled

Set disabled state on the component to make the input and managed chips non-interactive. You can use either the disabled class or the data-coreui-disabled="true" option. For disabled, non-removable chips, combine it with data-coreui-removable="false".

<div class="chip-input" data-coreui-chip-input data-coreui-disabled="true" data-coreui-removable="false" data-coreui-placeholder="Input disabled">
  <span class="chip">Read only</span>
  <span class="chip">Locked</span>
</div>

Readonly

Use readonly state when chips should stay visible and focusable, but values must not change. Set data-coreui-readonly="true" (or readonly: true in JavaScript) to block adding and removing chips.

<div class="chip-input" data-coreui-chip-input data-coreui-readonly="true" data-coreui-placeholder="Read-only values">
  <span class="chip">JavaScript</span>
  <span class="chip">TypeScript</span>
</div>

Selectable chips

Enable selection for chips managed by Chip Input. In this example, select.coreui.chip-input updates a live list of selected values below the field.

<div id="chipSelectable" class="chip-input">
  <span class="chip">Design</span>
  <span class="chip">Backend</span>
  <span class="chip active">QA</span>
  <span class="chip active">DevOps</span>
</div>
<p class="form-text mt-2 mb-0">Selected chips: <span id="chipSelectableOutput">None</span></p>

const chipSelectableElement = document.querySelector('#chipSelectable')
const chipSelectableOutput = document.querySelector('#chipSelectableOutput')

const chipSelectable = new coreui.ChipInput(chipSelectableElement, {
  placeholder: 'Add team role...',
  selectable: true
})

const updateSelectedOutput = selected => {
  chipSelectableOutput.textContent = selected.length > 0 ? selected.join(', ') : 'None'
}

chipSelectableElement.addEventListener('select.coreui.chip-input', event => {
  updateSelectedOutput(event.selected)
})

chipSelectable.add('Frontend')
chipSelectable.add('Security')
updateSelectedOutput(chipSelectable.getSelectedValues())

Usage

Initialize the Bootstrap Chip Input component via data attributes or JavaScript. The chip input component automatically creates a hidden form input to submit all chip values with the form.

Via data attributes

Add data-coreui-chip-input to initialize the chip input component. Options can be passed as data-coreui-* attributes.

<div class="chip-input" data-coreui-chip-input data-coreui-name="skills" data-coreui-placeholder="Add tags..." data-coreui-separator=","></div>

When initialized, Chip Input creates a hidden input to submit values with the form.
Use name (or data-coreui-name) to control the submitted field name.

Via JavaScript

const chipInputElement = document.querySelector('.chip-input')
const chipInput = coreui.ChipInput.getOrCreateInstance(chipInputElement, {
  separator: ',',
  maxChips: 5
})

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}'.

Methods

const chipInputElement = document.querySelector('.chip-input')
const chipInput = coreui.ChipInput.getOrCreateInstance(chipInputElement)

chipInput.add('JavaScript')
chipInput.add('TypeScript')

// eslint-disable-next-line no-console
console.log(chipInput.getValues())

chipInput.remove('JavaScript')
chipInput.clear()

Events

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

chipInputElement.addEventListener('add.coreui.chip-input', event => {
  if (event.value.length < 2) {
    event.preventDefault()
  }
})

chipInputElement.addEventListener('input.coreui.chip-input', event => {
  // eslint-disable-next-line no-console
  console.log('Input value:', event.value)
})

chipInputElement.addEventListener('change.coreui.chip-input', event => {
  // eslint-disable-next-line no-console
  console.log('Current values:', event.values)
})

Keyboard behavior

When input is focused

When a chip is focused

Accessibility

The Bootstrap Chip Input component follows WAI-ARIA patterns to ensure the chip input is fully usable with keyboards and assistive technologies.

• Associate a <label> with the ghost input for screen readers.
• Chips are focusable and keyboard navigable when initialized by the plugin.
• Remove buttons include aria-label="Remove" by default.
• Selected chips are reflected via .active and aria-selected.
• Use a descriptive aria-label or <label> on the chip input container to communicate its purpose (e.g., “Add skills” or “Recipients”).

Customizing

CSS variables

Chips inputs use local CSS variables on .chip-input for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

--cui-chip-input-min-height: #{$chip-input-min-height};
--cui-chip-input-padding-y: #{$chip-input-padding-y};
--cui-chip-input-padding-x: #{$chip-input-padding-x};
--cui-chip-input-font-size: #{$chip-input-font-size};
--cui-chip-input-bg: #{$chip-input-bg};
--cui-chip-input-color: #{$chip-input-color};
--cui-chip-input-border-width: #{$chip-input-border-width};
--cui-chip-input-border-color: #{$chip-input-border-color};
--cui-chip-input-border-radius: #{$chip-input-border-radius};
--cui-chip-input-gap: #{$chip-input-gap};
--cui-chip-input-transition: #{$chip-input-transition};

SASS variables

$chip-input-min-height:        $input-height;
$chip-input-padding-y:         .25rem;
$chip-input-padding-x:         .75rem;
$chip-input-font-size:         $input-font-size;
$chip-input-bg:                var(--#{$prefix}body-bg);
$chip-input-color:             var(--#{$prefix}body-color);
$chip-input-border-width:      var(--#{$prefix}border-width);
$chip-input-border-color:      var(--#{$prefix}border-color);
$chip-input-border-radius:     var(--#{$prefix}border-radius);
$chip-input-gap:               .375rem;
$chip-input-transition:        $input-transition;

$chip-input-min-height-sm:     $input-height-sm;
$chip-input-padding-y-sm:      .125rem;
$chip-input-padding-x-sm:      .5rem;
$chip-input-font-size-sm:      $input-font-size-sm;
$chip-input-border-radius-sm:  var(--#{$prefix}border-radius-sm);
$chip-input-gap-sm:            .125rem;

$chip-input-min-height-lg:     $input-height-lg;
$chip-input-padding-y-lg:      .375rem;
$chip-input-padding-x-lg:      1rem;
$chip-input-font-size-lg:      $input-font-size-lg;
$chip-input-border-radius-lg:  var(--#{$prefix}border-radius-lg);
$chip-input-gap-lg:            .5rem;