Navigation
Filterable list control panels
The filter control panel allows users to whittle down number of items in a list to help them focus in on a specific piece of content they may be looking for, or find content relevant to them based on specific filter parameters, housed in an expandable above the list.
Standard filterable list
Use filters in conjunction with search to help users narrow down large amounts of data or content. Follow form patterns for grouping, layout, and messaging. Note that notification messaging sits below the filter and above results.
HTML code snippet
<div id="o-filterable-list-controls"
class="o-filterable-list-controls">
<div class="o-expandable
o-expandable--background
o-expandable--border
o-expandable--onload-open">
<button class="o-expandable__header" type="button">
<span class="o-expandable__label">
Filter posts
</span>
<span class="o-expandable__cues">
<span class="o-expandable__cue-open" role="img" aria-label="Show filters">
<svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg cf-icon-svg--plus-round" viewBox="0 0 17 20.4"><path d="M16.416 10.283A7.917 7.917 0 1 1 8.5 2.366a7.916 7.916 0 0 1 7.916 7.917zm-2.958.01a.792.792 0 0 0-.792-.792H9.284V6.12a.792.792 0 1 0-1.583 0V9.5H4.32a.792.792 0 0 0 0 1.584H7.7v3.382a.792.792 0 0 0 1.583 0v-3.382h3.382a.792.792 0 0 0 .792-.791z"/></svg>
</span>
<span class="o-expandable__cue-close" role="img" aria-label="Hide filters">
<svg xmlns="http://www.w3.org/2000/svg" class="cf-icon-svg cf-icon-svg--minus-round" viewBox="0 0 17 20.4"><path d="M16.416 10.283A7.917 7.917 0 1 1 8.5 2.366a7.916 7.916 0 0 1 7.916 7.917zm-2.958.01a.792.792 0 0 0-.792-.792H4.32a.792.792 0 0 0 0 1.583h8.346a.792.792 0 0 0 .792-.791z"/></svg>
</span>
</span>
</button>
<div class="o-expandable__content">
<form method="get" action="#">
<div class="content-l">
<div class="content-l__col
content-l__col-1">
<div class="o-form__group">
<div class="m-form-field">
<label class="a-label a-label--heading" for="o-filterable-list-controls_title">
Search by keyword(s)
</label>
<input type="text" name="title" id="o-filterable-list-controls_title" class="a-text-input a-text-input--full" maxlength="250">
</div>
</div>
</div>
<div class="content-l__col
content-l__col-1-3">
<div class="o-form__group">
<div class="m-form-field">
<label class="a-label a-label--heading" for="o-filterable-list-controls_categories">
Category
</label>
<div class="o-multiselect">
<ul class="o-multiselect__choices"></ul>
<header class="o-multiselect__header"><input class="o-multiselect__search a-text-input" type="text" placeholder="Select up to five" id="o-filterable-list-controls_categories" autocomplete="off"></header>
</div>
</div>
</div>
</div>
<div class="content-l__col
content-l__col-1-3">
<div class="o-form__group">
<div class="m-form-field">
<label class="a-label a-label--heading" for="o-filterable-list-controls_topics">
Topics
</label>
<div class="o-multiselect">
<ul class="o-multiselect__choices"></ul>
<header class="o-multiselect__header"><input class="o-multiselect__search a-text-input" type="text" placeholder="Select up to five" id="o-filterable-list-controls_topics" autocomplete="off"></header>
</div>
</div>
</div>
</div>
<div class="content-l__col
content-l__col-1-3">
<div class="o-form__group">
<div class="m-form-field">
<label class="a-label a-label--heading" for="o-filterable-list-controls_language">
Language
</label>
<div class="o-multiselect">
<ul class="o-multiselect__choices"></ul>
<header class="o-multiselect__header"><input class="o-multiselect__search a-text-input" type="text" placeholder="Select up to five" id="o-filterable-list-controls_language" autocomplete="off"></header>
</div>
</div>
</div>
</div>
<div class="content-l__col
content-l__col-1">
<div class="content-l">
<div class="content-l__col
content-l__col-2-3">
<div class="o-form__group">
<fieldset class="o-form__fieldset">
<legend class="h4">
Date range
</legend>
<div class="content-l">
<div class="content-l__col
content-l__col-1-2">
<div class="m-form-field">
<label class="a-label a-label--heading" for="o-filterable-list-controls_from-date">
From:
</label>
<input type="date" name="from_date" class="a-text-input a-text-input--full" placeholder="mm/dd/yyyy" data-type="date" id="o-filterable-list-controls_from-date">
</div>
</div>
<div class="content-l__col
content-l__col-1-2">
<div class="m-form-field">
<label class="a-label a-label--heading" for="o-filterable-list-controls_to-date">
To:
</label>
<input type="date" name="to_date" class="a-text-input a-text-input--full" placeholder="mm/dd/yyyy" data-type="date" id="o-filterable-list-controls_to-date">
</div>
</div>
</div>
</fieldset>
</div>
</div>
</div>
</div>
<div class="content-l__col
content-l__col-1">
<div class="m-btn-group">
<button class="a-btn" type="submit">
Apply filters
</button>
<a class="a-btn a-btn--link a-btn--warning" href="#">
Clear filters
</a>
</div>
</div>
</div>
</form>
</div>
</div>
</div>Use cases
When to use
- There are more than 20 documents or listings for users to browse
- Users interacting with content want to focus their searching activities on this specific group of content, rather than using the general site search
- Data has relevant characteristics to filter, for example product and issue for complaint data, location and property type for HMDA, date range and categories for articles
When other options are better
- The total amount of content can be skimmed in a list of 20 items or less
- Characteristics available as filter options—such as topics, dates, and categories—are not relevant to the content
- Search alone is sufficient for user needs
Guidelines
Content guidelines
- Headings and labels should be as succinct as possible, ideally 10 characters or less. Do not use a colon or other punctuation after the heading.
- Help text in text fields should be 40 characters or less.
- Answer options beneath the heading should also be succinct, roughly 25 characters or less.
- Headings and answer options should be sentence case unless specifically proper nouns or titles.
Behavior
- Layout should be a maximum of three columns. Columns stack vertically below 601 pixels.
- Lives within in an expandable allowing controls to be hidden when not in use or needed. The filterable list is expanded on page load.
- When a filter setting is applied, a notification appears below the panel indicating number of results or errors.