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 input Basic example

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

JavaScript TypeScript Accessibility
Chip input Variants

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

Feature Approved Needs review Blocking
Chip input Sizes

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

HTML
JavaScript
TypeScript
Chip input Empty 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.

Vue Vite
Press Enter or comma to add a value.
Chip input Disabled and readonly

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

Read only Locked
JavaScript TypeScript
Chip input Form-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.
Product Design Docs