Welcome Getting started Layout styles github-circle-black-transparent Source
Components
Badges
App bars
Bottom app bars Top app bars
Buttons
Common buttons FAB Icon buttons Segmented buttons
Cards Carousel Checkboxes Chips Date pickers Dialogs Forms Icons Lists Menus Navigation Progress indicators Pull to refresh Radios Search Selects
Sheets
Bottom sheets Side sheets
Sliders Snackbars Switches Tabs Text fields Time pickers Tooltips Utilities
home apps Buttons palette Two
Materially
github-circle-black-transparent

Chips

Chips help people enter information, make selections, filter content, or trigger actions
Material Design Guidelines: Chips

Example

Chips can show multiple interactive elements together in the same area, such as a list of selectable movie times, or a series of email contacts. There are four types of chips: assist, filter, input, and suggestion
Assist
settings
Filter
settings
Filter menu
home One Two Three
Input

<mc-chip-set onchange=console.log(this.values)>
  <mc-chip label=One></mc-chip>
  <mc-chip label=Two>
    <mc-icon slot=leading-icon>settings</mc-icon>
  </mc-chip>
</mc-chip-set>


<mc-chip-set onchange=console.log(this.values)>
  <mc-chip checked class=elevated filter label=One></mc-chip>
  <mc-chip class=elevated filter label=Two>
    <mc-icon slot=leading-icon>settings</mc-icon>
  </mc-chip>
</mc-chip-set>


<mc-chip-set onchange=console.log(this.values)>
  <mc-chip filter label=One name=a></mc-chip>
  <mc-chip filter name=b value=One>
    <mc-menu slot=menu>
      <mc-menu-item>
        <mc-icon slot=start>home</mc-icon>
        One
      </mc-menu-item>
      <mc-menu-item>Two</mc-menu-item>
      <mc-menu-item>Three</mc-menu-item>
    </mc-menu>
  </mc-chip>
</mc-chip-set>


<mc-chip-set edit input label=Label onchange=console.log(this.values)>
  <mc-chip label="My Name" value="My Name <[email protected]>" edit input></mc-chip>
</mc-chip-set>
            

Assist

inbox
<mc-chip-set>
  <mc-chip onclick="console.log('do something')" label=One></mc-chip>
  <mc-chip onclick="console.log('do something')" label=Two>
    <mc-icon slot=leading-icon>inbox</mc-icon>
  </mc-chip>
  <mc-chip onclick="console.log('do something')" label=Three></mc-chip>
</mc-chip-set>
            

Filter

inbox One Two On Off
<mc-chip-set>
  <mc-chip filter label=one></mc-chip>
  <mc-chip checked filter label=two></mc-chip>
  <mc-chip filter label=three>
    <mc-icon slot=leading-icon>inbox</mc-icon>
  </mc-chip>

  
  <mc-chip filter label=number>
    <mc-menu slot=menu>
      <mc-menu-item>One</mc-menu-item>
      <mc-menu-item>Two</mc-menu-item>
    </mc-menu>
  </mc-chip>

  
  <mc-chip filter value=on>
    <mc-menu slot=menu>
      <mc-menu-item>On</mc-menu-item>
      <mc-menu-item>Off</mc-menu-item>
    </mc-menu>
  </mc-chip>
</mc-chip-set>
            
// set value
document.querySelector('mc-chip-group.filter').value = 'one,status:on';
            

Input

Input
Input with chip editing

<mc-chip-set input label=Label>
  <mc-chip value="Ben Rubin <[email protected]>" input></mc-chip>
  <mc-chip value="Other Guy <[email protected]>" input></mc-chip>
</mc-chip-set>


<mc-chip-set label="With edit" edit input>
  <mc-chip value="Ben Rubin <[email protected]>" edit input></mc-chip>
  <mc-chip value="Other Guy <[email protected]>" edit input></mc-chip>
</mc-chip-set>
            

Add chip set in code

Add chip
<mc-chip-set id=chip-set-1>
  <mc-chip checked filter label=one name=one value=0ne></mc-chip>
</mc-chip-set>
            
function updateValues() {
  // get current set values
  console.log(document.querySelector('#chip-set-1').values);

  document.querySelector('#chip-set-1').addChip({
    type: 'filter',
    name: ++this.#counter,
    label: this.#counter,
    value: this.#counter,
    checked: false
  });
}
            

Style

CSS variables that allow you override default values
/* Optional variables for overriding */
  
--mc-chip-elevated-container-color: var(--mc-surface-container-low);
--mc-chip-checked-container-color: var(--mc-secondary-container);
--mc-chip-text-color: var(--mc-on-surface);
--mc-chip-check-color:  var(--mc-primary);
            
menu home apps Get started