# Bootstrap 6 Chip Input
> Bootstrap Chip Input component for CoreUI — create tag-like multi-value inputs for skills, categories, or recipients with keyboard support, selection, and form integration.
## 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 through a hidden field with a configurable `name`, which the browser validates like any field.
The chip input is built on top of the [Chip set](https://coreui.io/bootstrap/docs/components/chip-set/) component, so it inherits the same roving focus and keyboard navigation between chips. Its public API and events are unchanged.
## 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.
```html
JavaScriptTypeScriptAccessibility
```
> **Note:** The `` is created automatically by the component when initialized. You can also add it manually in the markup if preferred. A hidden `` is generated alongside it to carry the chip values, separated by commas, and it takes its name from `data-coreui-name` (e.g. `data-coreui-name="chipInputBasicExample"`). Without that attribute the field has no name, so the chips are not submitted with the form.
```html
JavaScriptTypeScriptAccessibility
```
## Variants
Use contextual chip classes inside Bootstrap 6 Chip Input to represent categories, status, or priority.
```html
FeatureApprovedNeeds reviewBlocking
```
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.
```html
```
The JavaScript below initializes the example:
```js
const chipInputElement = document.querySelector('#chipVariants')
const chipInput = new coreui.ChipInput(chipInputElement, {
// Class is resolved dynamically from chip value.
chipClassName(value) {
const variants = {
approved: 'theme-success',
blocking: 'theme-danger',
feature: 'theme-primary',
'needs review': 'theme-warning'
}
return variants[value.trim().toLowerCase()] || 'theme-secondary'
},
placeholder: 'Add a bug...'
})
chipInput.add('Feature')
```
## Sizing
Use `chip-input-sm` and `chip-input-lg` to match surrounding form controls. Default size is provided by `.chip-input` without a size modifier.
```html
HTML
JavaScript
TypeScript
```
## Empty state
Start with just the input and let users add chips as they type.
```html
```
## With form field
Wrap the control in [`.form-field`](https://coreui.io/bootstrap/docs/forms/field/) to lay it out with its label and description, and to get validation feedback in the right place. The label goes inside the container as `.chip-input-label` — that is the one the component points at the text input it builds.
```html
VueVite
Press Enter or comma to add a value.
```
## Validation
The chip input carries its chips in a hidden `