Tag filter

Questions or comments?

Purpose

Filters through content and show/hide content that match certain tags.

Use when

You want to filter through an extensive list of items.

Accessibility guidance

The filter controls (checkboxes, radio buttons, dropdowns) must appear before the list of items they control.

Working example

English example

French example

How to implement

Wrap your section and tag your items.

1. Wrap the whole section that is going to be filtered by tags in a <div class="wb-tagfilter provisional">.
2. Add the attribute data-wb-tags to each item or section that you want to control the visibility of, and define one or multiple tags as its value. Use a regular space between each tag, e.g., data-wb-tags="tag1 tag2 tag3".

Identify your items wrapper

Add the class .wb-tagfilter-items to the element wrapping your tagged items. For example:

<ul class="wb-tagfilter-items">
	<li data-wb-tags="tag1">Item 1</li>
	<li data-wb-tags="tag2">Item 2</li>
	<li data-wb-tags="tag1">Item 3</li>
	<li data-wb-tags="tag2">Item 4</li>
	<li data-wb-tags="tag1">Item 5</li>
	...
</ul>

Add your filter controls

For checkboxes

1. Create your checkbox. The attribute name is mandatory for checkboxes.
2. Add the attribute value to the checkbox. Note: the value of this attribute must be the same as the tag added to the item(s) above in order to control it, e.g., value="myTag".
3. Add the CSS class wb-tagfilter-ctrl to the checkbox.

Your final checkbox should look like this:

<input type="checkbox" name="myCheckboxGroup" class="wb-tagfilter-ctrl" value="myTag" />

For radio buttons

1. Create your radio button. The attribute name is mandatory for radio buttons.
2. Add the attribute value to the radio button. Note: the value of this attribute must be the same as the tag added to the item(s) above in order to control it, e.g., value="myTag".
3. Add the CSS class wb-tagfilter-ctrl to the radio button.

Your final radio button should look like this:

<input type="radio" name="myRadioGroup" class="wb-tagfilter-ctrl" value="myTag" />

For dropdowns

1. Create your dropdown with your default option. The attribute name is mandatory for dropdowns.
2. Add the CSS class wb-tagfilter-ctrl to the dropdown.
3. Add your other options and define the attribute value. Note: the value of this attribute must be the same as the tag added to the item(s) above in order to control it, e.g., value="myTag".

Your final dropdown should look like this:

<select name="myDropdown" class="wb-tagfilter-ctrl">
	<option value="">All</option>
	<option value="myTag">My tag</option>
	<option value="myTag2">My tag 2</option>
	<option value="myTag3">My tag 3</option>
</select>

Note: add an empty value to your default option in order to show all items.

Add your no result element

Optionally, you can add an element that will show when there are no item visible. Identify this element with the CSS class wb-tagfilter-noresult.

This element needs to be added directly after the items wrapper (.wb-tagfilter-items).

For example:

<ul class="wb-tagfilter-items">
	<li data-wb-tags="tag1">Item 1</li>
	<li data-wb-tags="tag2">Item 2</li>
	<li data-wb-tags="tag1">Item 3</li>
	<li data-wb-tags="tag2">Item 4</li>
	<li data-wb-tags="tag1">Item 5</li>
	...
</ul>
<div class="wb-tagilfter-noresult">
	<p>No item match this combination of filters.</p>
</div>

Essential component behavior

• By default, for every checkbox filter group, if no checkbox is selected, it has the same effect as if all checkboxes were selected.
• The behavior for multiple checkboxes in a group is to display items that have either of the tags selected (OR behavior), not show items that have all the tags selected (AND behavior).

Notes

For semantic purposes, every logical group of filters should be wrapped by a <fieldset> element.

Date modified:

2022-09-10