Font and theme export

Chips

Display compact labels and contacts, or let users enter a list of tags.

Basic example

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.

<div class="chips"></div>

Setup

Start with the kmaterialize CSS and JavaScript from Getting started, then follow the component setup below.

import { Chips } from 'kmaterialize';

Chips.init(document.querySelectorAll('.chips'), {
    allowUserInput: true,
    placeholder: 'Enter a tag',
    secondaryPlaceholder: '+Tag'
});

Set allowUserInput: true to enable tag entry, then initialize each editable chip field once after its markup exists. Plain .chip labels need no per-element initialization.

Examples and variants

Initial tags, placeholders, and autocomplete

Choose the options for each chip field when initializing it.

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">
</div>

  document.addEventListener('DOMContentLoaded', function() {
    const elems = document.querySelectorAll('.chips-autocomplete');
    const instances = Chips.init(elems, {
      allowUserInput: true,
      autocompleteOptions: {
        data: [
          {id: 12, text: "Apple"},
          {id: 13, text: "Microsoft"},
          {id: 42, text: "Google", image: 'http://placehold.it/250x250'}
        ]
      },
      placeholder: 'Enter a tag',
      secondaryPlaceholder: '+Tag',
    });
  });

Display 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
check Filter close
Information
check Filter close 
<div class="chip">
  <img src="images/yuna.jpg" alt="Contact Person"> Jane Doe
</div>
<div class="chip">
  Tag
  <i class="close material-icons">close</i>
</div>
<div class="chip">
  <i class="material-icons">check</i>
  Filter
  <i class="close material-icons">close</i>
</div>
<div class="chip outlined">Information</div>
<div class="chip outlined">
  <i class="material-icons">check</i>
  Filter
  <i class="close material-icons">close</i>
</div>

Contacts

To create a contact chip just add an img inside.

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

Tags

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

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

Validation

A limit on tags is a limit on the chip collection, not the length of the text used to type a new chip. Validate the collection in your application and associate the message with its editor.

These previews keep their error state visible. In your form, show errors after checking a field or submitting, then clear them when the value is valid.

For text fields, use .input-field.error, aria-invalid="true", and a message linked with aria-describedby. Remove the error state when resolved. Use aria-live="polite" for messages updated dynamically.

Too many tags
Design
Animation
Lighting
Compositing

Choose up to three tags. Remove one tag before saving.

<div role="group" aria-label="Project tags" aria-describedby="validation-tags-error">
    <div class="chip outlined">Design</div>
    <div class="chip outlined">Animation</div>
    <div class="chip outlined">Lighting</div>
    <div class="chip outlined">Compositing</div>
    <p id="validation-tags-error" class="supporting-text error-text"><i class="material-icons" aria-hidden="true">error</i> Choose up to three tags. Remove one tag before saving.</p>
</div>

Reference

Chip data object


  const chip = {
    id: '4711', // unique identifier (can be a string too)
    text: 'Title', // optional Text
    image: '', // optional Image-Url
  };

Options

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.
closeIconClass String 'material-icons' Specifies class to be used in "close" button (useful when working with Material Symbols icon set).
allowUserInput Boolean false Specifies option to render user input field
autocompleteOptions Object {} Set autocomplete options.
autocompleteOnly Boolean false Toggles abililty to add custom value not in autocomplete list.
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.

ATTENTION: Data-Format has changed from version 1.X.X to 2.0.0! Please update option 'data'.

Methods

Use these methods to interact with chips.

All the methods are called on the plugin instance. You can get the plugin instance like this: 


  const instance = Chips.getInstance(elem);
.addChip();

Add chip to input.

Arguments

Chip: Chip data object.


  instance.addChip({
    id: 1337,
    text: 'John Doe', // optional
    image: '', // optional
  });
.deleteChip();

Delete nth chip.

Arguments

Integer: Index of chip.


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

Select nth chip.

Arguments

Integer: Index of chip.


  instance.selectChip(2); // Select 2nd chip

Properties

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.