Skip to main content Home
About About the Design SystemRoadmap
Get started OverviewDesignersDevelopers
Foundations OverviewColorGridIconographySpacingTypography
Tokens Overview Global colorbox shadowTypographyborderopacityspacelengthIconBreakpointsMedia Queries
Elements All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Navigation (primary) Navigation (secondary) Pagination PopoverPlanned Progress stepsPlanned Site status Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed
Theming OverviewColor PalettesCustomizingDevelopers
Patterns All PatternsCardTabsFilterFormLinkLink with iconLogo wallSearch barSkip navigationSticky bannerSticky cardTileVideo thumbnail
Personalization All Personalization PatternsAnnouncement
Accessibility FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers
Design/code status Release notes Get support

Chip

OverviewStyleGuidelinesCodeAccessibilityDemos
ImplementationAccessible labelKeyboard InteractionFocus orderTouch targetsARIA Authoring Practices Guide (APG)Web Content Accessibility GuidelinesImplementationAccessible labelKeyboard InteractionFocus orderTouch targetsARIA Authoring Practices Guide (APG)Web Content Accessibility Guidelines

Implementation

Ensure that any interactive elements can be navigated to and interacted with using a keyboard or other assistive technologies like a screen reader.

Accessible label

You can provide an accessible label to a chip group by using the following code. If no accessible label is provided, the legend will be Filter by:.

<rh-chip-group accessible-label="Filter comments">...</rh-chip-group>

Keyboard Interaction

Chips in a chip group can be can be navigated with a keyboard.

Four chips and a clear all button. All show the focus outline around the chip text. The legend exists on the left.
Key Result
Tab
  • Moves focus left to right to the next chip (unless it is disabled)
  • Focus moves outside
Shift + Tab
  • Moves focus right to left to the previous chip (unless it is disabled)
  • Focus moves outside
Enter
  • Selects or unselects a chip
  • Unselects all chips if the focus is on the Clear all button

Focus order

Focus moves from left to right and top to bottom when chips are stacked.

Two rows of four chips showing numbers above each chip. The chips are numbered 1-4 in each row, showing the focus order from left to right.

Touch targets

Even with a few letters each, chips are adequately spaced for optimal touch targets.

Two rows of chips with five chips each. Overtop of each chip is a semitransparent circle showing the touch target.

ARIA Authoring Practices Guide (APG)

Learn to use the accessibility semantics defined by the Accessible Rich Internet Application (ARIA) specification to create accessible web experiences.

View APG resources

Web Content Accessibility Guidelines

Understanding documents provide detailed explanations for Web Content Accessibility Guidelines (WCAG) guidelines and success criteria.

Edit this page on GitHub
© 2021-2025 Red Hat, Inc. Deploys by Netlify