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

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 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);