settings

Chips

bookmark

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

Basic
Contacts

To create a contact chip just add an img inside.

Contact PersonJane Doe
Tags

To create a contact chip just add an img inside.

Tag close
Javascript Plugin Usage Chips

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
Set tags
Use placeholders and override hint texts
Use autocomplete with chips.
<div class="chips chips-initial"></div><div class="chips"></div><div class="chips chips-placeholder"></div><div class="chips chips-autocomplete"></div>
$('.chips').chips();$('.chips-initial').chips({    data: [{        tag: 'Apple',    }, {        tag: 'Microsoft',    }, {        tag: 'Google',    }],});$('.chips-placeholder').chips({    placeholder: 'Enter a tag',    secondaryPlaceholder: '+Tag',});$('.chips-autocomplete').chips({    autocompleteOptions: {        data: {            'Apple': null,            'Microsoft': null,            'Google': null        },        limit: Infinity,        minLength: 1    }});