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

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