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