##### Chips

settings Settings arrow_drop_down

- Access1
- Profile2
- Notifications

Chips can be used to represent small blocks of information. They are most commonly used either for contacts or for tags.

#### Contacts

John Doe

To create a contact chip just add an img inside.

    <div class="chip">
    	<img src="../../images/avatar/avatar-3.png" alt="Contact Person">
    	Jane Doe
    </div>

#### Tags

Tag close

To create a tag chip just add a close icon inside with the class `close`.

    <div class="chip">
    	Tag
    	<i class="close material-icons">close</i>
    </div>

#### Chips Styles

You can also style it easily with materialize admin theme pre defined color set classes.

Solid color background
Solid color with shadow
Gradient color background
Gradient color with shadow

#### Tags

Tag close
Candy close
Cake close
Book close

To create a tag chip just add an close icon inside.

    <div class="chip">
        Tag
        <i class="material-icons material-icons"> close</i>
    </div>

Styles tag chips

You can also style tag chips easily with materialize admin theme pre defined color set classes.

Tag close
Candy close
Cake close
Book close
John Doe close
Materialize Admin Theme close
Materialize Admin Theme close
Materialize Admin Theme close

#### Javascript Plugin Usage

To add tags, just enter your tag text and press enter. You can delete them by clicking on the close icon or by using your delete button.

Set initial tags.

Use placeholders and override hint texts.

Use autocomplete with chips.

#### Markup

      <div class="chips"></div>
      <div class="chips chips-initial"></div>
      <div class="chips chips-placeholder"></div>
      <div class="chips chips-autocomplete"></div>

#### jQuery Initialization

      $('.chips').material_chip();
      $('.chips-initial').material_chip({
        data: [{
          tag: 'Apple',
        }, {
          tag: 'Microsoft',
        }, {
          tag: 'Google',
        }],
      });
      $('.chips-placeholder').material_chip({
        placeholder: 'Enter a tag',
        secondaryPlaceholder: '+Tag',
      });
      $('.chips-autocomplete').material_chip({
        autocompleteOptions: {
          data: {
            'Apple': null,
            'Microsoft': null,
            'Google': null
          },
          limit: Infinity,
          minLength: 1
        }
      });

Chip data object

      var chip = {
        tag: 'chip content',
        image: '', //optional
        id: 1, //optional
      };

#### jQuery Plugin Options

Option Name | Type | Description
--- | --- | ---
data | array | Set the chip data (look at the Chip data object)
placeholder | string | Set first placeholder when there are no tags.
secondaryPlaceholder | string | Set second placeholder when adding additional tags.
autocompleteData | Object | Set autocomplete data.
autocompleteLimit | Integer | Set autocomplete limit.

#### Events

Material chips exposes a few events for hooking into chips functionality.

Event | Description
--- | ---
chip.add | this method is triggered when a chip is added.
chip.delete | this method is triggered when a chip is deleted.
chip.select | this method is triggered when a chip is selected.

      $('.chips').on('chip.add', function(e, chip){
        // you have the added chip here
      });
      $('.chips').on('chip.delete', function(e, chip){
        // you have the deleted chip here
      });
      $('.chips').on('chip.select', function(e, chip){
        // you have the selected chip here
      });

#### Methods

Use these methods to access the chip data.

Parameter | Description
--- | ---
data | It returns the stored data.

      $('.chips-initial').material_chip('data');

add

- help_outline
- widgets
- today
- mail_outline