Chip

A chip is used to communicate a value or a set of attribute-value pairs within workflows that involve filtering a set of objects.

Note: The chip component has been deprecated. Our new recommendation is to use the label component instead.

Accessibility

To implement an accessible PatternFly chip and chip group:

Render the chip as a button when using it as an overflow chip
Ensure any interactive elements - such as close buttons or overflow chips - within a chip group can be navigated to and interacted with via keyboard and other assistive technologies such as a screen reader
Provide an aria-label if the chip group does not have a visible text category name

Testing

At a minimum, a chip and chip group should meet the following criteria:

Standard keyboard navigation can be used to navigate between chip group close buttons, chip close buttons, or other focusable elements.Tab navigates to the next chip group close button, chip close button, or focusable element, and Shift + Tab navigates to the previous chip group close button, chip close button, or focusable element.
Standard keyboard interaction can be used to interact with the chip group close button, chip close button, or other interactive elements inside the chip group.Enter and Space should be able to activate the chip group close button, individual chip close buttons, or an overflow chip. This can usually be achieved by using "click" events.
If the chip group's category name or an individual chip's content is truncated, the entire category name or chip can receive focus, not just the close button.This can be achieved by ensuring the category name or chip component itself has the tabindex="0" attribute. The category name/chip should then be included in the standard keyboard navigation.
If the chip group's category name or an individual chip's content is truncated, it has a tooltip that displays on hover or focus.Follow the tooltip accessibility documentation.
If a chip group does not have a visible category name, it has an aria-label instead.This will help users of assistive technologies differentiate multiple chip groups on a page, and provide context of what content the chip group contains.
An overflow chip is rendered as a button element.

React customization

The following React props have been provided for more fine-tuned control over accessibility.

Chip React properties

Prop	Applied to	Reason
`closeBtnAriaLabel="[text that labels the chip close button]"`	`Chip`	Adds an accessible name to the chip's close button. Required. When passing in a custom value, you do not need to repeat the chip's content and should only include a verb such as "close" or "remove".
`component="[element tag]"`	`Chip`	Sets the base element for the chip (`div` element by default). When using a chip as an overflow chip, or in any manner where clicking the chip itself causes an action to trigger, the value passed in should be "button" to provide the built-in interaction necessary for improved accessibility.

Chip group React properties

Prop	Applied to	Reason
`aria-label="[text that labels the chip group]"`	`ChipGroup`	Adds an accessible name to the chip group. Required when the chip group does not have a visible category name.
`closeBtnAriaLabel="[text that labels the chip group close button]"`	`ChipGroup`	Adds an accessible name to the chip group's close button. Required. When passing in a custom value, you do not need to repeat the chip group's category name and should only include a verb such as "close" or "remove".

HTML/CSS customization

The following HTML attributes and PatternFly classes can be used for more fine-tuned control over accessibility.

Chip HTML attributes and classes

Attribute or class	Applied to	Reason
`id`	`.pf-v6-c-chip`	The value of this attribute is passed into the close button's `aria-labelledby` attribute. Required when a chip has a close button.
`aria-label="[text that labels the chip close button]"`	`.pf-v6-c-chip > button`	Adds an accessible name to the chip's close button. Required when the close button does not contain any visible text.
`aria-labelledby="[space separated list of the chip's and close button's ID]"`	`.pf-v6-c-chip > button`	Combines the accessible name of the close button and the chip content, providing more context to users regarding which chip will be closed. Required.
`id`	`.pf-v6-c-chip > button`	The value of this attribute is passed into the close button's `aria-labelledby` attribute. Required.
`aria-hidden="true"`	`.pf-v6-c-chip > button > i`	Removes the close button icon from the accessibility tree, preventing assistive technologies from potentially announcing duplicate or unnecessary information without visually hiding it. Required if the close button contains an icon.

Chip group HTML attributes and classes

Attribute or class	Applied to	Reason
`aria-label="[text that labels the chip group]"` or `aria-labelledby="[id of the element that labels the chip group]"`	`.pf-v6-c-chip-group__list`	Adds an accessible name to the chip group. Required when the chip group does not have a visible category name.
`aria-label="[text that labels the chip group close button]"`	`.pf-v6-c-chip-group__close > button`	Adds an accessible name to the chip group's close button. Required when the close button does not contain any visible text.
`aria-labelledby="[space separated list of the chip group's and close button's ID]"`	`.pf-v6-c-chip-group__close > button`	Combines the accessible name of the close button and the chip group's category name, providing more context to users regarding which chip group will be closed. Required.
`id`	`.pf-v6-c-chip-group__close > button`	The value of this attribute is passed into the close button's `aria-labelledby` attribute. Required.
`aria-hidden="true"`	`.pf-v6-c-chip-group__close > button > i`	Removes the close button icon from the accessibility tree, preventing assistive technologies from potentially announcing duplicate or unnecessary information without visually hiding it. Required if the close button contains an icon.
`id`	`.pf-v6-c-chip-group__label`	The value of this attribute is passed into the close button's `aria-labelledby` attribute. Required when a chip group has a close button.
`role="list"`	`.pf-v6-c-chip-group__list`	Indicates that the chip group list is a list element. Required. This role is redundant since `.pf-v6-c-chip-group__list` is a `<ul>` element, but it is required for assistive technologies to announce the list properly.

Edit this page on GitHub