Explore the API reference for the Vue Chip Set component and discover how to effectively utilize its props for customization.
On this page
CChipSet
jsx
import { CChipSet } from '@coreui/vue-pro'
Props
Property
Default
Type
as
'div'
string
Component used for the root node. Either a string to use a HTML element or a component.
chips
undefined
(string | CChipSetItem)[]
Renders chips from data instead of the default slot. Each item is a string or an object with a value, an optional label, and any CChip props. The slot is used when this is omitted.
disabled
-
boolean
Disables every chip rendered by the component.
filter
-
boolean
Turns the chips into filter chips, each showing a leading check icon while selected.
removable
-
boolean
Displays a remove button on every chip rendered by the component.
removeIcon
undefined
string, object
Replaces the default remove icon on every chip with a custom icon node.
selectable
-
boolean
Enables selection behavior for the chips rendered by the component.
selected
undefined
string[]
The selected chip values passed using v-model:selected.
selectedIcon
undefined
string, object
Replaces the default selected icon shown by filter chips with a custom icon node.
selectionMode
'multiple'
string
Sets how many chips can be selected at once.
Events
Event name
remove
Event occurs when a chip requests removal, with its value.
select
Event occurs when the selected chip values change.
update:chips
Emit the chips without the removed one (for v-model:chips).
update:selected
Emit the new selected values whenever the selection changes (for v-model:selected).