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
<!-- Assist -->
<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>

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

<!-- Filter menu -->
<mc-chip-set onchange="console.log(this.values)">
  <mc-chip filter name="a" label="One"></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>

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

Assist

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

Filter

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

  <!-- No default value -->
  <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>

  <!-- Default value -->
  <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
<!-- Input -->
<mc-chip-set input label="Label">
  <mc-chip input value="Ben Rubin <[email protected]>"></mc-chip>
  <mc-chip input value="Other Guy <[email protected]>"></mc-chip>
</mc-chip-set>

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

Add chip set in code

Add chip
<mc-chip-set id="chip-set-1">
  <mc-chip name="one" filter value="0ne" label="one" checked></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