Chip

A chip provides a toggle for filtering content or indicating a selection when users choose from categories. Each chip must contain short inline text and may be placed in an rh-chip-group of related chips. The hidden checkbox allows form participation and provides screen reader accessibility. Keyboard users press Tab to navigate between chips and use Enter or Space to toggle.

import '@rhds/elements/rh-chip/rh-chip.js';

<rh-chip>Chip</rh-chip>

import { Chip } from "@rhds/elements/react/rh-chip/rh-chip.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Chip>Chip</Chip>
);

• Allow users to select from a list of options
• Indicate to users what selections they made
• Represent a checkbox group with more emphasis

When working with multiple related chips, use a chip group.

Chip groups are used to present multiple selectable options that users can toggle on or off, such as filters or preference settings. The chip group element:

• Groups chips together
• Provides an accessible label for the set
• Includes a “clear all” button to reset all selections at once