Materialize Chips


Materialize Chips: Chips are basically small blocks which are used to represent the small piece of information. Chips are used basically for tags or contacts. It is very easy to create chips in Materialize framework. Here in this tutorial we are going to explain how you can create chips in Materialize framework.


Materialize Chips Example

There are basically two types of Chips in Materialize-

  • Contacts
  • Tags

Contacts

To create contact chip just wrap image by div container and add class “chip” to the div. Here is an example of contact chip-

Materialize Contact Chip Example:

Try it »

If you run the above example it will produce the output something like this –

Materialize Chips Example: Contact Chip

Tags

Create div with class chip add tag name and close icon simply as below –

Materialize Tag Chip Example:

Try it »

When you click on the close icon chip will be automatically closed. If you run the above example it will produce the output something like this –

Materialize Tag Chip Example


Learn More

Let us Learn More about the Materialize Chips.


JavaScript Plugin Usage

Let us create dynamic Chips using JavaScript Plugin.

Materialize Tag Chip JavaScript Dynamic Example:

Try it »

If you run the above example it will produce output something like this –

Materialize Tag Chip JavaScript Dynamic Example & Demo Online

Options

Following Options are available in jQuery Plugin-

  • data(array): You can use this to set the chip data.
  • placeholder(string): This is used to show the primary placeholder for Adding tags.
  • secondaryPlaceholder(string): This is used to show second placeholder when adding additional tags

Events

  • chips.add : This method is triggered when a chip is added.
  • chips.delete : This method is triggered when a chip is deleted.
  • chips.select : This method is triggered when a chip is selected.

Now Let us create example to understand the above events –

Materialize Chips Add Event

Here is an example of add event in Materialize Chips. This event will be called when you add a tag in chip –

Materialize Chips Add Event Example:

Try it »

Materialize Chips Delete Event

This event will be called when you delete a chip –

Materialize Chips delete tag Event Example:

Try it »

Materialize Chips Select Event

This event will be called when you select a chip –

Materialize Chips select chip | tag Example:

Try it »

Methods

If you want to get the stored data of chip you can use the following method –

Materialize Get Chip Data Example: