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.
Chips come in the following variations: Default, closeable, filter, outlined, pill. The default slot of v-chip
will also accept avatars and icons alongside text.
Select your desired component from below and see the available props, slots, events and functions.
Below is a collection of simple to complex examples.
Any color from the Material Design palette can be used to change a chips color.
Chips can use text or any icon available in the Material Icons font library.
Outlined chips inherit their border color from the current text color.
Label chips use the v-card
border-radius.
v-chip
component can have various sizes from x-small
to x-large
.
draggable
v-chip
component can be dragged by mouse.
v-chip
component has filter
option which shows an additional icon to you if chip is active. It can be customized using filter-icon
.
v-chip
can be rendered without ripple if ripple
prop is set to false
.
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.
Chips can be used as actionable items. Provided with a click event, the chip becomes interactive and can invoke methods.
Selects can use chips to display the selected data. Try adding your own tags below.
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.
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.
Chips can be combined with v-menu
to enable a specific set of actions for a chip.