Materialize CSS Chips, Working with Chips in Materialize CSS

Materialize CSS Tutorial

Materialize Chips

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

Contacts

Are you create a contact chip just add an img inside.

<div class="chip">
    <img src="../images/free-time-learn-icon.png" alt="Contact Person">
    F T L
</div>

Output :

Tags

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

<div class="chip">
    HTML5
    <i class="close material-icons">close</i>
</div>
<div class="chip blue white-text">
    CSS3
    <i class="close material-icons">close</i>
</div>
<div class="chip red white-text">
    Material Design
    <i class="close material-icons">close</i>
</div>

Output :

Javascript Plugin Usage

Are you 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.

<div class="chips"></div>
<br />
<p>Set initial tags.</p>
<div class="chips chips-initial"></div>
<br />
<p>Placeholders and override hint texts.</p>
<div class="chips chips-placeholder"></div>
<br />
<p>Autocomplete with chips</p>
<div class="chips chips-autocomplete"></div>


<!-- Start jQuery Initialization -->
<script type="text/javascript">
(function($){
  $(function(){
	// Chips
	$('.chips').material_chip();
	
	$('.chips-initial').material_chip({
	  readOnly: true,
	  data: [{
		tag: 'HTML5',
	  }, {
		tag: 'CSS3',
	  }, {
		tag: 'Bootstrap 4',
	  }, {
		tag: 'Material Design',
	  }]
	});
	
	$('.chips-placeholder').material_chip({
	  placeholder: 'Enter a tag',
	  secondaryPlaceholder: '+Tag',
	});
	
	$('.chips-autocomplete').material_chip({
	  autocompleteOptions: {
		data: {
		  'HTML5': null,
		  'CSS3': null,
		  'Bootstrap 4': null,
		  'Material Design': null
		}
	  },
	});

  }); 
})(jQuery);
</script>
<!-- End jQuery Initialization -->

Output :

Chip data object

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

Events

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

Event	Description
chip.add	Chip is added
chip.delete	Chip is deleted
chip.select	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');

Materialize CSS Tutorial