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