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.

Accessibility

To implement an accessible PatternFly chip component:

Render the chip as a button when using it as an overflow chip
Follow the chip group accessibility documentation when rendering multiple, related chips within a group

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

Standard keyboard navigation can be used to navigate between chip close buttons or other focusable elements.Tab navigates to the next chip close button or focusable element, and Shift + Tab navigates to the previous chip close button or focusable element.
Standard keyboard interaction can be used to interact with the chip close button.Enter and Space should be able to activate the chip close button. This can usually be achieved by using "click" events.
If the chip content is truncated, the entire chip can receive focus, not just the chip's close button.This can be achieved by ensuring the chip component itself has the tabindex="0" attribute. A chip should then be included in the standard keyboard navigation.
If the chip content is truncated, it has a tooltip that displays on hover or focus.Follow the tooltip accessibility documentation.
An overflow chip is rendered as a button element.

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

Prop	Applied to	Reason
`closeBtnAriaLabel="[text describing the 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.

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

Attribute or class	Applied to	Reason
`id`	`.pf-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 describing the close button]"`	`.pf-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-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-c-chip > button`	The value of this attribute is passed into the close button's `aria-labelledby` attribute. Required.
`aria-hidden="true"`	`.pf-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.

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH