Vue Chip Input Component API
Chip Input API
Explore the API reference for the Vue Chip Input component and discover how to effectively utilize its props for customization.
On this page
import { CChipInput } from '@coreui/vue-pro'
| Property | Default | Type |
|---|
| chipClassName | undefined | ChipClassName |
Adds custom classes to chips rendered by the component. Accepts a static className or a resolver function based on chip value. |
| createOnBlur | true | boolean |
Creates a new chip when the component loses focus with a pending value. |
| defaultValue | () => [] | string[] |
Sets the initial uncontrolled values rendered by the component. |
| disabled | - | boolean |
Toggle the disabled state for the component. |
| filter | - | boolean |
Renders the chips as filter chips, each showing a leading check icon while selected. Implies selectable. |
| id | - | string |
Sets the id of the internal text input rendered by the component. |
| label | - | string, object |
Renders an inline label inside the component container. |
| maxChips | null | number |
Sets the maximum number of chips that can be created in the component. |
| modelValue | undefined | string[] |
The default name for a value passed using v-model. |
| name | - | string |
Sets the name of the hidden input used by the component for form submission. |
| placeholder | '' | string |
Sets placeholder text for the internal input of the component. |
| readOnly | - | boolean |
Toggle the readonly state for the component. |
| removable | true | boolean |
Displays remove buttons on chips managed by the component. |
| selectable | - | boolean |
Enables chip selection behavior in the component. |
| selectionMode | 'multiple' | string |
Sets how many chips can be selected at once. |
| separator | ',' | string |
Sets the separator character used to create chips while typing or pasting in the component. |
| size | - | string |
Size the component small or large. |
| Event name |
|---|
| add |
Event occurs when the component adds a new chip. |
| change |
Event occurs when the value list changes. |
| input |
Event occurs when the internal text input value changes. |
| remove |
Event occurs when the component removes a chip. |
| select |
Event occurs when the selected chip values change. |
| update:modelValue |
Emit the new value whenever there's a change. |