Usage guidelines
An example of the filters pattern can be seen on the Boston Scientific site.
For more information on form best practices, refer to Anatomy.
Form controls
Form controls that are allowed for filtering:
- Checkboxes
- Radio buttons
Form controls that aren’t allowed for filtering:
- Selects
- Text inputs
Page layout
The filters pattern and secondary navigation pattern cannot be combined on the same page because they occupy the same area.
Styling
There is one default style for filters.
Container IDs
The filters hide and show content living in separate containers.
The containers need to have assigned IDs in order for the filters to know what content to hide or show. Each container must have one unique ID. Match the container IDs to the filtering options. For example, if one container held Endoscopy information, match that container’s ID to the Endoscopy filtering option.
If there are no containers that match a selected filter option, a “No results” message will appear on the page.