Skip to main content Home About the Design SystemRoadmap OverviewDesignersDevelopers OverviewColorGridIconographyInteractionsSpacingTypography Overview Global colorBox shadowTypographyBorderOpacitySpaceLengthIconBreakpointsMedia queries 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 Menu dropdown Navigation link Navigation (primary) Navigation (secondary) Navigation (vertical) Pagination PopoverPlanned Progress stepper Scheme toggle Site status Skeleton Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed OverviewColor PalettesCustomizingDevelopers All PatternsAccordionCall to ActionCardFilterFormLink with iconLogo wallSearch barSticky bannerSticky cardTabsTagTile All Personalization PatternsAnnouncement FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers Design/code status Release notes Get support

Chip

OverviewStyleGuidelinesCodeAccessibilityDemos
ImportingUsageImporting chip vs. chip grouprh-chiprh-chip-groupImportingUsageImporting chip vs. chip grouprh-chiprh-chip-group

Importing

Add rh-chip to your page with this import statement:

<script type="module">
  import '@rhds/elements/rh-chip/rh-chip.js';
</script>
Copy to Clipboard Wrap lines

To learn more about installing RHDS elements on your site using an import map read our getting started docs.

Usage 

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

<script type="module">
  import '@rhds/elements/rh-chip/rh-chip.js';
</script>
Copy to Clipboard Wrap lines

Importing chip vs. chip group

If using <rh-chip-group>, change the import from rh-chip.js to rh-chip-group.js:

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

Users can import rh-chip-group.js to gain access to both elements. If you're only using chip, save some bytes by only importing rh-chip.js.

rh-chip

A chip is used to filter information or indicate that a selection was made.

Slots 1

Slot Name Summary Description
[default]

The label of the checkbox
Note: [default] unnamed slots do not have a slot="name" attribute.

Attributes 3

Attribute DOM Property Description Type Default
checked checked

Whether the chip is checked.

 
boolean
 
false
disabled disabled

Whether the chip is disabled.

 
boolean
 
false
value value

Set a custom string for the input's value attribute. Defaults to on.

 
string
 
unknown

Methods 0

None

Events 1

Event Name Description
chip-checked

when chip is checked/unchecked

CSS Shadow Parts 1

Part Name Summary Description
chip

The main chip container

CSS Custom Properties 0

None

Design Tokens 23

Token Description Copy
--rh-space-lg

16px spacer
--rh-font-family-body-text

Body text font family
--rh-line-height-body-text

Line height for body text
--rh-border-radius-pill

Pill border radius; Example: Label
--rh-border-width-sm

1px border width; Example: Secondary CTA or Button
--rh-color-border-subtle
--rh-space-xs

4px spacer
--rh-font-size-body-text-sm

14px font size
--rh-font-size-body-text-xs

12px font size
--rh-border-radius-default

3px border radius; Example: Card
--rh-length-3xs

2px length token
--rh-length-md

8px length token
--rh-border-width-md

2px border width: Example: Alert
--rh-color-border-interactive
--rh-color-text-secondary
--rh-color-gray-40

Subtle icon (hover state)
--rh-color-gray-30

Subtle borders (light theme)
--rh-color-surface-dark

Tertiary surface (dark theme)
--rh-color-blue-70

Alert - Info title text
--rh-color-blue-10

Alert - Info background
--rh-color-blue-30

Inline link (dark theme)
--rh-color-blue-50

Label - Filled (Blue) accent color
--rh-space-md

8px spacer

rh-chip-group

Chip Group

Slots 3

Slot Name Summary Description
accessible-label

An accessible label for the chip group. Content for this slot is put into the <legend> element. Also available as an attribute.
[default]

Place individual rh-chips inside rh-chip-group
Note: [default] unnamed slots do not have a slot="name" attribute.
clear-all

Customized text for the "Clear all" button

Attributes 2

Attribute DOM Property Description Type Default
size size

Decreases the font-size of the chip's label

 
'sm'
 
unknown
accessible-label accessibleLabel

The accessible label for the form control / rh-chip-group

 
string
 
unknown

Methods 1

Method Name Description
firstUpdated()

Events 0

None

CSS Shadow Parts 1

Part Name Summary Description
legend

CSS Custom Properties 0

None

Design Tokens 18

Token Description Copy
--rh-space-lg

16px spacer
--rh-font-size-body-text-md

16px font size
--rh-border-radius-pill

Pill border radius; Example: Label
--rh-color-interactive-primary-default
--rh-font-family-body-text

Body text font family
--rh-line-height-body-text

Line height for body text
--rh-border-width-sm

1px border width; Example: Secondary CTA or Button
--rh-space-xs

4px spacer
--rh-space-md

8px spacer
--rh-color-interactive-primary-hover
--rh-color-border-subtle
--rh-border-radius-default

3px border radius; Example: Card
--rh-length-4xs

1px length token
--rh-length-md

8px length token
--rh-border-width-md

2px border width: Example: Alert
--rh-color-border-interactive
--rh-font-size-body-text-sm

14px font size
--rh-font-size-body-text-xs

12px font size
Edit this page on GitHub
© 2026 Red Hat Deploys by Netlify