Vue Material -

Chips

Chips represent complex entities in small blocks, such as a contact. They can be used as a way for a user create arbitrary items, like categories or tags.

Standalone Chip

A chip can be used standalone, without any connection with another chip. It can be used to be like a badge or a category of a entity in your application. You can specify if your chip can be deletable and clickable:

Single

API - md-chip

All the following options can be applied to the md-chip component:

NameDescriptionDefault
md-clickable Boolean Enables/Disables the click action in the chip. false
md-deletable Boolean Creates a chip that can hold a delete action. Useful when editing a chip series, like tags or categories. false
md-disabled Boolean Enables/Disables the chip to be clickable of deletable. false

Editable model

Sometimes we need to edit the set of items on screen, for example. When editing tags, the user may need to remove/add tags. In this case you can use the editable chips, that is the default behaviour:

Editable

Readonly

Let's think in a entity that have tags. Sometimes you might need to show all of them in a single row, but not enable the user to edit them. You can achieve that using the md-chips component, with a static option:

Static

Custom Template

Sometimes we need to show more information about a chip, so we want to have a custom HTML structure for the chip itself. To create that scenario we can use the template scope. In this case all you have to do is to create a slot with your custom template and you're good to go. Take a loot at this example:

Scoped Slot

Duplicated Chip

Chips would reject insertion while a chip was duplicated. You could customize feedback style of the duplicated chip:

Duplicated Feedback

Formatter

Sometimes you may need to format a chip value before adding it, and for this case you can use a custom formatter function. This function will receive the chip value and must return the formatted value.

Formatted chips

Hue Colors

You can always use the hue modifiers in single chips:

Themed Chips

API - md-chips

All the following options can be applied to the md-chips component:

NameDescriptionDefault
v-model Array The content to be displayed as chips. Need to be a array of strings, unless you specify a custom template. []
id String The input id. If null, it will be created automatically. null
md-input-type String The input type. Cannot be 'file' text
md-placeholder String The input placeholder. It is useful to show to the user which type of data will be inserted. null
md-static Boolean Creates a non-editable chips. Useful to show inside a details page. false
md-limit Number Blocks the chips to create items above the limit. false
md-check-duplicated Boolean Always check if there is a duplicated chip while changing the input value, or check it only on insertion false
md-format Function Formatter before chip insertion. Effects to insertion and duplicated-checking.
The Chips will pass the inputted value as a parameter of this function. This function returns the formatted result.
null