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 &ldquo;</span> and <span class="sr-only">&rdquo; 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 button element

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 .chiclets-container with this to keep your chiclets on one horizontally scrolling line in the XS and SM breakpoints


  • Last updated March 30, 2018
  • Authorable - Yes
  • Core - Chiclets