React Bootstrap Chip Input Component
Chip Input with Bootstrap Styling
Bootstrap 5 components designed for React.js
This component is part of the CoreUI for React.js UI components library, which offers all Bootstrap components designed to work seamlessly with React.js.
If you want to use Bootstrap 5 in a React.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 build Bootstrap-styled token inputs with the React Chip Input component in CoreUI, including variants, sizes, selection, and form integration.
Overview#
The CoreUI React 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.
- Type values and press
Enteror a separator to create chips. - Chips can be removable and selectable.
- The input stays inline and grows as you type.
- Form integration is supported with a hidden input when
nameis provided.
When to use Chip Input#
Use the React 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#
Variants#
Sizes#
Empty state#
With label#
Disabled#
Readonly#
Selectable chips#
Selected: None