Nucleus Powered Mitochondria

    This package has been deprecated

    Author message:

    Use @anypoint-web-components/anypoint-chip-input instead

    TypeScript icon, indicating that this package has built-in type declarations

    3.1.2 • Public • Published

    Published on NPM

    Build Status

    Published on


    A material design input with chips

    <p>Regular input</p>
    <paper-chip-input label="Input with chips" value='["Alarm"]' source='[{"value": "Alarm", "icon": "alarm"}]'></paper-chip-input>
    <p>Input with suggestions</p>
    <paper-chip-input label="Type your favourite fruits" source='["Apple", "Banana", "Blueberry", "Cherry", "Cranberry", "Grape", "Lime"]'></paper-chip-input>

    Icons with suggestions

    You can specify suggestions containing an icon. It is rendered as a prefix to the chip label. The icon can be either Polymer's icon defined in iron-iconset or an image.

    To render icons set suggestions' source to be a list of objects containing value property and icon or image.

    input.source = [{
      value: 'Icon item',
      icon: 'add'
      value: 'Image item',
      image: 'path/to/image.png'

    Suggestions with ID

    You may need to use some other identifier for values than the label of suggestion. It may happen if the rendered label is not unique. The suggestions support the id property which is used to compare chips. The id is used as a value of the input instead of suggestion's value.

    For example:

    input.source = [{
      value: 'Biking',
      icon: 'maps:directions-bike',
      id: 'activity-1'
      value: 'Boat trip',
      icon: 'maps:directions-boat',
      id: 'activity-2'

    would produce input value as ["activity-1", "activity-2"] when both suggestions are selected.

    API components

    This components is a part of API components ecosystem



    npm install --save @advanced-rest-client/paper-chip-input

    In an html file

        <script type="module">
          import '@advanced-rest-client/paper-chip-input/paper-chip-input.js';

    In a LitElement

    import { LitElement, html } from 'lit-element';
    import '@advanced-rest-client/paper-chip-input/paper-chip-input.js';
    class SampleElement extends LitElement {
      render() {
        return html`
    customElements.define('sample-element', SampleElement);


    git clone
    cd paper-chip-input
    npm install

    Running the demo locally

    npm start

    Running the tests

    polymer test


    npm i @advanced-rest-client/paper-chip-input

    DownloadsWeekly Downloads






    Unpacked Size

    83.5 kB

    Total Files


    Last publish


    • carowright
    • jarrodek
    • twoplustwoone
    • lbauret