paper-chip | Vaadin

Polymer 2.x Chips represent complex entities in small blocks, such as a contact.

[ This description is mirrored from at on 2019-05-22 ]


Build Status Published on Dependency Status


Polymer 2.x Chips represent complex entities in small blocks, such as a contact.

Install the Polymer-CLI for Polymer 2

First, make sure you have the Polymer CLI installed. Then run polymer serve to serve your application locally.

Viewing Your Application

$ polymer serve

Example: Basic paper-chip's

<paper-chip label="Basic"></paper-chip>

<paper-chip label="Basic with Avatar Text">
  <span class="chip-background" slot="avatar">

<paper-chip label="Closable" closable></paper-chip>

<paper-chip label="Closable and image" closable>
  <img class="chip-image" slot="avatar" src="demo/avatar.png" alt="Contact Person">

<paper-chip label="Closable and icon" closable>
  <span class="chip-background" slot="avatar">
    <iron-icon icon="icons:favorite"></iron-icon>

Example: paper-chip's with custom styles

<paper-chip label="Custom Label Color" class="custom-label-color"></paper-chip>

<paper-chip label="Custom Background Color" class="custom-background"></paper-chip>

<paper-chip label="No hover effect" no-hover></paper-chip>

<paper-chip label="Custom Avatar Background Color" class="custom-avatar-background">
  <span class="chip-background" slot="avatar">

<paper-chip label="Custom avatar font-size and icon/font color" class="custom-avatar-font-color-and-size">
  <span class="chip-background" slot="avatar">
    <iron-icon icon="icons:favorite"></iron-icon>

<style is="custom-style">
  paper-chip.custom-label-color {
    --paper-chip-label-color: #4db6ac;

  paper-chip.custom-background {
    --paper-chip-background-color: #64b5f6;

  paper-chip.custom-avatar-background {
    --paper-chip-avatar-background-color: #64b5f6;

 paper-chip.custom-avatar-font-color-and-size {
  --paper-chip-avatar-font-color: red;
  --paper-chip-font-size: 16px;

Example: Use tags in an input field

<paper-chip-input label="+Add (Enter) -Delete (Backspace)" items='["one", "two", "three"]' closable></paper-chip-input>

<paper-chip-input always-float-label label="+Add (Enter) -Delete (Backspace)">
  <paper-chip label="Default Tag" slot="input"></paper-chip>
  <paper-chip label="Default Tag Closbale" closable slot="input"></paper-chip>

<paper-chip-input disabled label="+Add (Enter) -Delete (Backspace)" items='["one", "two", "three"]' closable></paper-chip-input>

Example: Autocomplete field with tags

<paper-chip-input-autocomplete id="paper-chip-input-autocomplete"
  label="+Add (Enter) -Delete (Backspace)"

Browser Support

IE Chrome Firefox Opera Safari
None ✘ Latest ✔ None ✘ None ✘ Latest ✔


  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -m 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D


Link to this version
ImportedReleased 02 February 2018MIT License
Framework Support
Polymer 2.0+
Browser Compatibility
Install with
bower install --save ThomasCybulski/paper-chip"#2.0.21"
Run the above Bower command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 2.0.21


  • polymer#Polymer/polymer#^v2.0.0
  • paper-icon-button#PolymerElements/paper-icon-button#^2.0.0
  • paper-input#PolymerElements/paper-input#^2.0.2
  • paper-item#PolymerElements/paper-item#^2.0.0
  • paper-listbox#PolymerElements/paper-listbox#^2.0.0
  • paper-material#PolymerElements/paper-material#^2.0.0
  • paper-ripple#polymerElements/paper-ripple#^2.0.1
  • paper-styles#PolymerElements/paper-styles#^2.0.0
  • iron-icons#PolymerElements/iron-icons#^2.0.1
  • iron-a11y-keys#PolymerElements/iron-a11y-keys#^2.0.0
  • iron-a11y-keys-behavior#PolymerElements/iron-a11y-keys-behavior#^2.0.1