Menu

Facet

<ul class="u-remove-bullets">
<li class="c-facet">
<button class="c-facet__toggle" aria-expanded="false" aria-controls="products">
Products<svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--chevron-down">
<use xlink:href="/static/svg/sprite.svg#chevron-down"></use>
</svg>
</button>
<ul id="products" class="c-facet__list">
<li>
<input type="checkbox" class="c-checkbox" name="products" id="mastersizer-3000-lab" value="Mastersizer 3000+ Lab" />
<label for="mastersizer-3000-lab">Mastersizer 3000+ Lab (20)</label>
</li>
<li>
<input type="checkbox" class="c-checkbox" name="products" id="mastersizer-3000-pro" value="Mastersizer 3000+ Pro" />
<label for="mastersizer-3000-pro">Mastersizer 3000+ Pro (5)</label>
</li>
<li>
<input type="checkbox" class="c-checkbox" name="products" id="mastersizer-3000-ultra" value="Mastersizer 3000+ Ultra" />
<label for="mastersizer-3000-ultra">Mastersizer 3000+ Ultra (1)</label>
</li>
</ul>
</li>
</ul>
{
"facets": [
{
"id": "products",
"heading": "Products",
"options": [
{
"id": "mastersizer-3000-lab",
"value": "Mastersizer 3000+ Lab",
"label": "Mastersizer 3000+ Lab (20)"
},
{
"id": "mastersizer-3000-pro",
"value": "Mastersizer 3000+ Pro",
"label": "Mastersizer 3000+ Pro (5)"
},
{
"id": "mastersizer-3000-ultra",
"value": "Mastersizer 3000+ Ultra",
"label": "Mastersizer 3000+ Ultra (1)"
}
]
}
]
}

Props

Name Description