Home
Previous componentNext component

Filter menu

Open in fibo's StorybookOpen on 21st.dev

A Filter button whose menu lists the fields you can filter by, then each field's values. A Search filters button, or just typing, slides the same menu over to a search across every field and value, like a command menu.

StatusTodo, In progressPriorityUrgent
Filter menuOpen the menu and tick values. The app shows each applied field as a chip you can remove.

Examples

Views

The popup moves between three views, and each has a state or two.

FieldsThe first view: every field, with a button to search at the top.
Fields with selectionsA count on each field with values chosen. The dot on the trigger is the app's own.
A field's valuesTick any number. A back button returns to the fields.
SearchAfter Search filters: every value, grouped by field, until you type.
Search resultsMatches from every field, with the typed letters in bold.
No matchesA search with no results says so.

Instead of a Search filters button, the header can be a search box that is always there. Typing turns the menu into results in place, and clearing the text brings the menu back.

Inline, restingThe search box takes focus as the menu opens.
Inline, typingThe same results, with no back button to press.

Moving between views

Views slide forward going deeper and back coming out, and the popup's height follows its content. A search started inside a field stays within it. With reduced motion, views swap in place.

Views in motionInto Status, a search within it, back out, then a search across every field.

Applied as chips

The menu only picks filters. Here the app shows each applied field as a chip beside the button, with a button to remove it.

StatusTodo, In progressPriorityUrgent
Remove a chip, or change it from the menu.

On its own

The menu keeping its own state. Try it from the keyboard: arrows move, Right opens a field, Enter ticks a value, and any letter starts a search.

The default Filter button with the Search filters button inside.
Start typing as soon as it opens.

Your own trigger and wording

Any button can open the menu, such as an icon button in a crowded toolbar. Every piece of text the menu writes can be replaced, for another language.

An icon button that opens the same menu.

Anatomy

The trigger opens a popup with a header row and a list. What the header and the list hold changes with the view: the fields, one field's values, or a search.

  1. Trigger
  2. Search filters button
  3. Highlighted field
  4. Icon
  5. Count
  6. Opens its values
  7. Popup
The fieldsWhat opens first. Fields with values chosen show how many.
  1. Back
  2. Checkbox
  3. Value
  4. Field name
  5. Highlighted value
A field's valuesStatus open, with two values ticked and the arrow keys on Todo.
  1. Back
  2. Group label
  3. Result
  4. Search box
  5. Matched letters
Search resultsur typed from the fields: results grouped by field, the match in bold.

Guidelines

  • 01Use it above a list or table that people narrow down by several fields, like issues, orders or files.
  • 02Keep field names to one or two words, and order fields by how often people use them.
  • 03Order each field's values the way people think of them: a workflow in its order, people by name, sizes from small to large.
  • 04Show the applied filters next to the button, such as chips people can remove, so the list never looks mysteriously short.
  • 05For a single yes-or-no filter, a switch or a checkbox beside the list is quicker.

Best practices

DoGroup values under a short field name, in the order people expect.
Don'tDon't write long field names or shuffle values. The menu is for scanning.
StatusTodoPriorityUrgent

Showing 3 of 48 issues

DoShow what's applied beside the button, so a short list explains itself.

Showing 3 of 48 issues

Don'tDon't hide the filters inside the menu. People wonder where the rest went.

Accessibility

Everything works from the keyboard, one level at a time.

KeyDoes
↑↓DoesMoves the highlight
→DoesOpens the highlighted field
↵DoesOpens the highlighted field, or ticks the highlighted value
Any letterDoesStarts a search with that letter
←⌫DoesWith no search text, goes back to the fields or leaves the search
EscDoesClears the search, then leaves the field, then closes the menu
TabDoesMoves between the list and the Search filters button
  • 01When the menu opens, the list takes focus and points at the highlighted row with aria-activedescendant, so screen readers read each row as the arrows move. The Search filters button is one Tab away.
  • 02Entering search moves focus into the search box, a combobox that points at the highlighted row the same way. Leaving the search moves focus back to the list.
  • 03With the inline search, focus goes to the search box when the menu opens, and stays there.
  • 04Values are options in a multi-select listbox, announced as selected or not. Each field is read with how many of its values are chosen and that it opens its values.
  • 05A search announces how many results it found.
  • 06Escape steps back one level at a time, and the last press returns focus to the Filter button.
  • 07Rename every piece of text for your product's language: the trigger with triggerLabel, the popup with label, the search box with searchLabel and placeholder, and what only screen readers hear with labels.

References