Chips

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

Contacts

Contact Person Jane Doe
Contact Personmaterializecss

To create a contact chip just add an img inside.

                        
<div class="chip">
    <img src="../../img/yuna.jpg" alt="Contact Person">
    Jane Doe
</div>
<div class="chip">
    <img src="../../img/materializecss.png" alt="Contact Person">
    Jane Doe
</div>

Tags

Tag close
Tag1 close
Tag2 close

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

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

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 tags

Set initial tags

Use placeholders and override hint texts

                        
<div class="chips"></div>
<div class="chips chips-initial"></div>
<div class="chips chips-placeholder"></div>
                        
                    
                        
$('.chips').material_chip();
$('.chips-initial').material_chip({
data: [{
    tag: 'Apple',
}, {
    tag: 'Microsoft',
}, {
    tag: 'Google',
}],
});
$('.chips-placeholder').material_chip({
placeholder: 'Enter a tag',
secondaryPlaceholder: '+Tag',
});