Filter

A filter is a group of radio buttons. When the user selects an option, the filter hides the other options. It also shows a reset button next to the selected option.

Filter documentation

Class names

• component: filter
• part: filter-reset

Syntax

HTML form:

<form class="filter">
  <input class="btn btn-square" type="reset" value="×"/>
  <input class="btn" type="radio" name="{NAME}" aria-label="Tab 1 title"/>
  <input class="btn" type="radio" name="{NAME}" aria-label="Tab 2 title"/>
</form>

No HTML form:

<div class="filter">
  <input class="btn filter-reset" type="radio" name="{NAME}" aria-label="×"/>
  <input class="btn" type="radio" name="{NAME}" aria-label="Tab 1 title"/>
  <input class="btn" type="radio" name="{NAME}" aria-label="Tab 2 title"/>
</div>

Rules

• Replace {NAME} with a value that identifies the filter.
• Use a different name attribute for each set of radio inputs. This prevents conflicts.
• If the context permits, use the <form> tag. If you cannot use an HTML form, use <div>.
• Use the filter-reset class for the reset button.
• Do not select a radio input by default.