<div class="o-listbox-filter js-listbox-parent" data-param-name="">
<button class="o-listbox-filter__trigger js-listbox-trigger" type="button" aria-haspopup="listbox" aria-expanded="false">
Listbox Filter
<span class="o-listbox-filter__icon" aria-hidden="true"><svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11 1L6 6L1 1" class="u-ct-stroke" />
</svg>
</span>
</button>
<ul role="listbox" class="o-listbox-filter__listbox js-listbox" tabindex="0" aria-label="Listbox Filter list">
<li class="o-listbox-filter__listbox-item js-listbox-item" tabindex="-1" role="option" aria-selected="false" aria-checked="false">
<input tabindex="-1" id="listbox-item-230" class="o-listbox-filter__input js-filter-watch-checkbox" type="checkbox" data-title="Option A" value="optionA">
<label class="o-listbox-filter__label" for="listbox-item-230">Option A</label>
</li>
<li class="o-listbox-filter__listbox-item js-listbox-item" tabindex="-1" role="option" aria-selected="false" aria-checked="false">
<input tabindex="-1" id="listbox-item-4659" class="o-listbox-filter__input js-filter-watch-checkbox" type="checkbox" data-title="Option B" value="optionB">
<label class="o-listbox-filter__label" for="listbox-item-4659">Option B</label>
</li>
<li class="o-listbox-filter__listbox-item js-listbox-item" tabindex="-1" role="option" aria-selected="false" aria-checked="false">
<input tabindex="-1" id="listbox-item-4648" class="o-listbox-filter__input js-filter-watch-checkbox" type="checkbox" data-title="Option C" value="optionC">
<label class="o-listbox-filter__label" for="listbox-item-4648">Option C</label>
</li>
<li class="o-listbox-filter__listbox-item js-listbox-item" tabindex="-1" role="option" aria-selected="false" aria-checked="false">
<input tabindex="-1" id="listbox-item-3908" class="o-listbox-filter__input js-filter-watch-checkbox" type="checkbox" data-title="Option D" value="optionD">
<label class="o-listbox-filter__label" for="listbox-item-3908">Option D</label>
</li>
<li class="o-listbox-filter__listbox-item js-listbox-item" tabindex="-1" role="option" aria-selected="false" aria-checked="false">
<input tabindex="-1" id="listbox-item-3451" class="o-listbox-filter__input js-filter-watch-checkbox" type="checkbox" data-title="Option E" value="optionE">
<label class="o-listbox-filter__label" for="listbox-item-3451">Option E</label>
</li>
<li class="o-listbox-filter__listbox-item js-listbox-item" tabindex="-1" role="option" aria-selected="false" aria-checked="false">
<input tabindex="-1" id="listbox-item-2620" class="o-listbox-filter__input js-filter-watch-checkbox" type="checkbox" data-title="Option F" value="optionF">
<label class="o-listbox-filter__label" for="listbox-item-2620">Option F</label>
</li>
</ul>
</div>
<div class="o-applied-filters o-container is-empty">
<h2 id="applied-filter-results-title" class="u-sr-only">Applied Filters</h2>
<div class="o-applied-filters__wrapper">
<div id="applied-filter-results" class="o-applied-filters__inner">
</div>
<button class="js-remove-all-filters o-applied-filters__remove-all">
<span class="u-hover-drawline--thin">Remove All Filters</span>
</button>
</div>
</div>
<div class="o-listbox-filter js-listbox-parent" data-param-name="{{ paramName }}">
<button class="o-listbox-filter__trigger js-listbox-trigger" type="button" aria-haspopup="listbox" aria-expanded="false">
{{ title }}
<span class="o-listbox-filter__icon" aria-hidden="true">{% include '03-icons/down-carrat-small' %}</span>
</button>
<ul role="listbox" class="o-listbox-filter__listbox js-listbox" tabindex="0" aria-label="{{ title }} list">
{% for item in items %}
{% set itemID = item.id is defined ? item.id : 'listbox-item-' ~ random(5000) %}
<li class="o-listbox-filter__listbox-item js-listbox-item" tabindex="-1" role="option" aria-selected="false" aria-checked="false">
<input tabindex="-1" id="{{ itemID }}" class="o-listbox-filter__input js-filter-watch-checkbox" type="checkbox" data-title="{{ item.title}}" value="{{ item.value }}">
<label class="o-listbox-filter__label" for="{{ itemID }}">{{ item.title }}</label>
</li>
{% endfor %}
</ul>
</div>
{% if isSample %}
{% include "04-objects/filters/applied-filters" with { isSample: false } %}
{% endif %}
{
"pageColorTheme": "teal",
"isSample": true,
"title": "Listbox Filter",
"items": [
{
"title": "Option A",
"value": "optionA"
},
{
"title": "Option B",
"value": "optionB"
},
{
"title": "Option C",
"value": "optionC"
},
{
"title": "Option D",
"value": "optionD"
},
{
"title": "Option E",
"value": "optionE"
},
{
"title": "Option F",
"value": "optionF"
}
]
}
.o-listbox-filter {
position: relative;
}
.o-listbox-filter__trigger {
@include filterStyles;
}
.o-listbox-filter__icon {
@include filterIconStyles;
.o-listbox-filter.is-open & {
transform: rotate(180deg);
}
}
.o-listbox-filter__listbox {
@include filterWrapperStyles;
position: absolute;
top: 100%;
left: 0;
z-index: 9999;
visibility: hidden;
.o-listbox-filter.is-open & {
visibility: visible;
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.o-listbox-filter__listbox-item {
// &:focus .o-listbox-filter__label,
body.u-keyboard-user &[aria-selected=true] .o-listbox-filter__label {
@include filterHoverStyles;
}
}
.o-listbox-filter__input {
@include visually-hidden;
}
.o-listbox-filter__label {
display: block;
@include filterItemStyles;
input:checked + & {
@include filterSelectedStyles
}
&:hover,
&:focus,
input:focus + & {
@include filterHoverStyles;
cursor: pointer;
}
}
No notes defined.