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 -->
<wfc-chip-set onchange="console.log(this.values)">
<wfc-chip label="One"></wfc-chip>
<wfc-chip label="Two">
<wfc-icon slot="leading-icon">settings</wfc-icon>
</wfc-chip>
</wfc-chip-set>
<!-- Filter -->
<wfc-chip-set onchange="console.log(this.values)">
<wfc-chip filter class="elevated" checked label="One"></wfc-chip>
<wfc-chip filter class="elevated" label="Two">
<wfc-icon slot="leading-icon">settings</wfc-icon>
</wfc-chip>
</wfc-chip-set>
<!-- Filter menu -->
<wfc-chip-set onchange="console.log(this.values)">
<wfc-chip filter name="a" label="One"></wfc-chip>
<wfc-chip filter name="b" value="One">
<wfc-menu slot="menu">
<wfc-menu-item>
<wfc-icon slot="start">home</wfc-icon>
One
</wfc-menu-item>
<wfc-menu-item>Two</wfc-menu-item>
<wfc-menu-item>Three</wfc-menu-item>
</wfc-menu>
</wfc-chip>
</wfc-chip-set>
<!-- Input -->
<wfc-chip-set label="Label" input edit onchange="console.log(this.values)">
<wfc-chip input edit value="My Name <myname@gmail.com>" label="My Name"></wfc-chip>
</wfc-chip-set>
Assist
<wfc-chip-set>
<wfc-chip label="One" onclick="console.log('do something')"></wfc-chip>
<wfc-chip label="Two" onclick="console.log('do something')">
<wfc-icon slot="leading-icon">inbox</wfc-icon>
</wfc-chip>
<wfc-chip label="Three" onclick="console.log('do something')"></wfc-chip>
</wfc-chip-set>
Filter
<wfc-chip-set>
<wfc-chip filter label="one"></wfc-chip>
<wfc-chip filter label="two" checked></wfc-chip>
<wfc-chip filter label="three">
<wfc-icon slot="leading-icon">inbox</wfc-icon>
</wfc-chip>
<!-- No default value -->
<wfc-chip filter label="number">
<wfc-menu slot="menu">
<wfc-menu-item>One</wfc-menu-item>
<wfc-menu-item>Two</wfc-menu-item>
</wfc-menu>
</wfc-chip>
<!-- Default value -->
<wfc-chip filter value="on">
<wfc-menu slot="menu">
<wfc-menu-item>On</wfc-menu-item>
<wfc-menu-item>Off</wfc-menu-item>
</wfc-menu>
</wfc-chip>
</wfc-chip-set>
// set value
document.querySelector('wfc-chip-group.filter').value = 'one,status:on';
Input
Input
Input with chip editing
<!-- Input -->
<wfc-chip-set input label="Label">
<wfc-chip input value="Ben Rubin <ben@email.com>"></wfc-chip>
<wfc-chip input value="Other Guy <guy@email.com>"></wfc-chip>
</wfc-chip-set>
<!-- Input with chip editing -->
<wfc-chip-set input edit label="With edit">
<wfc-chip input edit value="Ben Rubin <ben@email.com>"></wfc-chip>
<wfc-chip input edit value="Other Guy <guy@email.com>"></wfc-chip>
</wfc-chip-set>
Set content wrapping
<wfc-chip-set>
<wfc-chip label="One"></wfc-chip>
...
</wfc-chip-set>
Updating chips and adding chips
<wfc-chip-set id="update1">
<wfc-chip name="one" filter value="0ne" label="one" checked></wfc-chip>
</wfc-chip-set>
function updateValues() {
// get current set values
console.log(document.querySelector('#update1').values);
// update set
document.querySelector('#update1').values = [
// update chip with name one
{
type: 'filter',
name: "one",
label: 'One Updated',
value: 'oneupdated',
checked: false
},
// adds new chip is because name 2 is not found
{
type: 'filter',
name: "two",
label: 'Two',
value: 'two',
checked: true
}
];
}