Chip input
CoreUI PRO hexagon
Our Admin Panel isn’t just a mix of third-party components. It’s the only Bootstrap dashboard built on a professional, enterprise-grade UI Components Library. This component is part of this library, and we present only the basic usage of it here. To explore extended examples, detailed API documentation, and customization options, refer to our docs.
Explore Documentation
or
Get CoreUI PRO →
Chip inputBasic example

Chip input lets users enter multiple values in one field. The plugin generates the inline input automatically after initialization.

JavaScriptTypeScriptAccessibility
Chip inputVariants

Contextual chip classes work inside chip input as well, which is handy for labels, issue types, or priorities.

FeatureApprovedNeeds reviewBlocking
Chip inputSizes

Use.chip-input-sm or.chip-input-lg to align the field with surrounding form controls.

HTML
JavaScript
TypeScript
Chip inputEmpty state and label

You can start with an empty field or wrap the component with a regular form label for clearer form structure and accessibility.

VueVite
Press Enter or comma to add a value.
Chip inputDisabled and readonly

Disabled blocks interaction entirely. Readonly keeps values visible, but prevents adding and removing chips.

Read onlyLocked
JavaScriptTypeScript
Chip inputForm-friendly examples

The component integrates well with ordinary Bootstrap forms, including helper text and predefined values.

[email protected][email protected]
Add one address at a time and press Enter.
ProductDesignDocs