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.
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. |