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 4 primary variations. Regular, with icon, with portrait and closeable.

API

v-chip

Examples

Playground

Explore the various options available to the v-chip component.

Custom lists

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.

Action chips

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

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

Colored

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

Icon

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

Outline

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

Label

Label chips use the v-card border-radius.

Closable

Closable chips can be controlled with a v-model. Listen to the input event if you want to know when a chip has been closed.

Expandable

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

In selects

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

Edit this page | language on Github