Chiclets are the UI representation of a faceted search—facets are the data objects and chiclets are the UI objects.
Examples
Usage
Rules
- Chiclets should be displayed near the controls that are used to add them
- It should be clear why the chiclets are present, e.g. placing a “Filtered By:“ text element near the chiclets explains their purpose
Constraints
- A click or tap anywhere within the chiclet will remove it both visible and from the DOM
- Chiclets have a 1:1 relationship with facets. To put it another way, a single chiclet can only represent one data point.
- Disabled chiclets cannot be removed
Principles
- Chiclets are used to visually represent filters (facets) that have been applied to limit the number of results shown in a given context
Accessibility
- Chiclets are
<button>
elements because they are focusable elements that perform an action on the page - Chiclets contain visually hidden
<span class="sr-only">Remove “</span>
and<span class="sr-only">” Filter</span>
to provide screen reader users clarity on the action the button performs - Quotation marks within each visually hidden span are used to create a brief pause in some screen readers, allowing the chiclet label to stand out as the label is read
Class Names
chiclet Required |
Used on the |
chiclets-container Modifier |
Wrap the chiclets in a container with this class to maintain the proper height at the current breakpoint, even if all chiclets are cleared |
chiclets-scroller-sm Modifier |
Surround your |
- Last updated March 30, 2018
- Authorable - Yes
- Core - Chiclets