Material Admin

Form Chips
Form Chips

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

Contact Person Jane Doe
Tag close

To create a contact chip just add an img inside.

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

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

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

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.

                                        <!-- Default with no input (automatically generated)  -->
                                        <div class="chips"></div>
                                        <div class="chips chips-initial"></div>
                                        <div class="chips chips-placeholder"></div>
                                        <div class="chips chips-autocomplete"></div>

                                        <!-- Customizable input  -->
                                        <div class="chips">
                                            <input class="custom-class">
                                        var elem = document.querySelector('.chips');
                                        var instance = M.Chips.init(elem, options);

                                        // Or with jQuery

                                            data: [{
                                              tag: 'Apple',
                                            }, {
                                              tag: 'Microsoft',
                                            }, {
                                              tag: 'Google',
                                            placeholder: 'Enter a tag',
                                            secondaryPlaceholder: '+Tag',
                                            autocompleteOptions: {
                                                data: {
                                                    'Apple': null,
                                                    'Microsoft': null,
                                                    'Google': null
                                                limit: Infinity,
                                                minLength: 1
                                        var chip = {
                                            tag: 'chip content',
                                            image: '', //optional
Name Type Default 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.
autocompleteOptions Object {} Set autocomplete options.
limit Integer Infinity Set chips limit.
onChipAdd Function null Callback for chip add.
onChipSelect Function null Callback for chip select.
onChipDelete Function null Callback for chip delete.

Use these methods to interact with chips.

Because jQuery is no longer a dependency, all the methods are called on the plugin instance. You can get the plugin instance like this:

                                        var instance = M.Chips.getInstance(elem);

                                        /* jQuery Method Calls
                                            You can still use the old jQuery plugin method calls.
                                            But you won't be able to access instance properties.

                                            $('.chips').chips('methodName', paramName);

Add chip to input.

Chip: Chip data object.

                                            tag: 'chip content',
                                            image: '', // optional

Delete nth chip.

Integer: Index of chip.

                                        instance.deleteChip(3); // Delete 3rd chip.

Select nth chip.

Integer: Index of chip.

                                        instance.selectChip(2); // Select 2nd chip
Name Type Description
el Element The DOM element the plugin was initialized with.
options Object The options the instance was initialized with.
chipsData Array Array of the current chips data.
hasAutocomplete Boolean If the chips has autocomplete enabled.
autocomplete Object Autocomplete instance, if any.
All Rights Reserved by Materialart. Designed and Developed by WrapPixel.