This is the Vuetify 3 documentation, examples and information may be broken or outdated.

Chips

The v-chip component is used to convey small pieces of information. Using the close property, the chip becomes interactive, allowing user interaction. This component is used by the v-chip-group for advanced selection options.

Usage

Chips come in the following variations: closeable, filter, outlined, pill. The default slot of v-chip will also accept avatars and icons alongside text.

API

Examples

Props

Closable

Closable chips can be controlled with a v-model. You can also listen to the click:close event if you want to know when a chip has been closed.

v-chip/prop-closable.vue

Colored

Any color from the Material Design palette can be used to change a chips color.

v-chip/prop-colored.vue

Draggable

draggable v-chip component can be dragged by mouse.

v-chip/prop-draggable.vue

Label

Label chips use the v-card border-radius.

v-chip/prop-label.vue

No ripple

v-chip can be rendered without ripple if ripple prop is set to false.

v-chip/prop-no-ripple.vue

Outlined

Outlined chips inherit their border color from the current text color.

v-chip/prop-outlined.vue

Sizes

v-chip component can have various sizes from x-small to x-large.

v-chip/prop-sizes.vue

Events

Action chips

Chips can be used as actionable items. Provided with a click event, the chip becomes interactive and can invoke methods.

v-chip/event-action-chips.vue

Slots

Icon

Chips can use text or any icon available in the Material Icons font library.

v-chip/slot-icon.vue

Misc

Custom list

In this example we opt to use a customized list instead of v-autocomplete. This allows us to always display the options available while still providing the same functionality of search and selection.

v-chip/misc-custom-list.vue

Expandable

Chips can be combined with v-menu to enable a specific set of actions for a chip.

v-chip/misc-expandable.vue

Filtering

Chips are great for providing supplementary actions to a particular task. In this instance, we are searching a list of items and collecting a subset of information to display available keywords.

v-chip/misc-filtering.vue

In selects

Selects can use chips to display the selected data. Try adding your own tags below.

v-chip/misc-in-selects.vue

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.