Vue Chip Component API

Chip API

Explore the API reference for the Vue Chip component and discover how to effectively utilize its props for customization.

On this page

CChip

jsx

import { CChip } from '@coreui/vue-pro'

Props

Property	Default	Type
active	-	`boolean`
Toggle the active state for the component.
ariaRemoveLabel	`'Remove'`	`string`
Provides an accessible label for the remove button.
as	`'span'`	`string`
Component used for the root node. Either a string to use a HTML element or a component.
clickable	-	`boolean`
Enables interactive hover styling and pointer cursor.
color	-	`Color`
Sets the color context of the component to one of CoreUI's themed colors.
disabled	`undefined`	`boolean`
Toggle the disabled state for the component. Defaults to `undefined` so a chip can override the value inherited from a `CChipSet` (including turning it off).
filter	`undefined`	`boolean`
Turns the component into a filter chip. A filter chip is selectable and shows a leading check icon while selected. Defaults to `undefined` so a chip can override the value inherited from a `CChipSet`.
removable	`undefined`	`boolean`
Displays a remove button inside the component. Defaults to `undefined` so a chip can override the value inherited from a `CChipSet` (including turning it off).
removeIcon	`undefined`	`string`, `object`
Replaces the default remove icon with a custom icon node.
selectable	`undefined`	`boolean`
Enables selectable behavior and keyboard toggle support. Defaults to `undefined` so a chip can override the value inherited from a `CChipSet`.
selected	`undefined`	`boolean`
Controls the selected state of a selectable component.
selectedIcon	`undefined`	`string`, `object`
Replaces the default selected icon shown by a filter chip with a custom icon node.
size	-	`string`
Size the component small or large.
value	`undefined`	`string`
Sets the value associated with the component, used by `CChipSet` to track selection.
variant	-	`string`
Set the button variant to an outlined style.

Events

Event name
click
Event called when the user clicks on the component.
deselect
Event called when the component becomes deselected.
keydown
Event called when the user presses a key.
remove
Event called when the component requests removal.
select
Event called when the component becomes selected.
selected-change
Event called when the selected state changes.