Chip
On this page
Importing
Add rh-chip to your page with this import statement:
<script type="module">
import '@rhds/elements/rh-chip/rh-chip.js';
</script>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>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 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.
Slots
| Slot Name | Summary | Description |
|---|---|---|
[default]
|
Chip label |
Expects short inline text for the chip label. Should not
contain block elements or interactive content. |
Attributes
| Attribute | DOM Property | Description | Type | Default |
|---|---|---|---|---|
checked
|
checked |
Whether the chip is checked. |
|
|
disabled
|
disabled |
Whether the chip is disabled. |
|
|
value
|
value |
Set a custom string for the input's |
|
|
Methods
None
Events
| Event Name | Description |
|---|---|
change
|
Fires when the chip is checked or
unchecked. The event's |
CSS Shadow Parts
| Part Name | Summary | Description |
|---|---|---|
chip
|
The outer |
CSS Custom Properties
None
Design Tokens
| Token | Description | Copy |
|---|---|---|
--rh-space-lg
|
Chip label block end margin 16px spacer |
|
--rh-font-family-body-text
|
Chip body text font family Body text font family |
|
--rh-line-height-body-text
|
Chip body text line height Line height for body text |
|
--rh-border-radius-pill
|
Chip pill border radius Pill border radius; Example: Label |
|
--rh-border-width-sm
|
Chip outline width 1px border width; Example: Secondary CTA or Button |
|
--rh-color-border-subtle
|
Chip outline color |
|
--rh-space-xs
|
Chip block padding 4px spacer |
|
--rh-font-size-body-text-sm
|
Chip label font size 14px font size |
|
--rh-font-size-body-text-xs
|
Small size chip label font size 12px font size |
|
--rh-border-radius-default
|
Focus ring border radius 3px border radius; Example: Card |
|
--rh-length-3xs
|
Focus ring block inset 2px length token |
|
--rh-length-md
|
Focus ring inline inset 8px length token |
|
--rh-border-width-md
|
Chip hover/focus outline width Focus ring outline width 2px border width: Example: Alert |
|
--rh-color-border-interactive
|
Focus ring outline color |
|
--rh-color-text-secondary
|
Disabled chip text color in light mode |
|
--rh-color-gray-40
|
Disabled chip text color in dark mode Subtle icon (hover state) |
|
--rh-color-gray-30
|
Disabled chip background in light mode Disabled chip outline in light mode Subtle borders (light theme) |
|
--rh-color-surface-dark
|
Disabled chip background in dark mode Disabled chip outline in dark mode Tertiary surface (dark theme) |
|
--rh-color-blue-70
|
Checked chip background in dark mode Checked chip text color in light mode Alert - Info title text |
|
--rh-color-blue-10
|
Checked chip background in light mode Checked chip text color in dark mode Alert - Info background |
|
--rh-color-blue-30
|
Checked chip outline in light mode Checked chip hover outline in light mode Inline link (dark theme) |
|
--rh-color-blue-50
|
Checked chip outline in dark mode Checked chip hover outline in dark mode Label - Filled (Blue) accent color |
|
--rh-space-md
|
Chip inline end spacing Chip inline padding Close icon inline start spacing 8px spacer |
|
rh-chip-group
A chip group provides a <fieldset> container for related rh-chip
elements. It renders a <legend> for screen reader accessibility.
Authors must provide an accessible label when "Filter by:" is not
appropriate. Authors should avoid placing non-chip elements in the
default slot. Users may press Tab to navigate between chips.
Slots
| Slot Name | Summary | Description |
|---|---|---|
accessible-label
|
Accessible label for the chip group |
Inline text for the chip group legend. Content is placed
into the |
[default]
|
Default slot for chip elements |
Expects |
clear-all
|
Clear all button label |
Inline text to customize the "Clear all" button label. Defaults to "Clear all". Should be localized for non-English contexts. |
Attributes
| Attribute | DOM Property | Description | Type | Default |
|---|---|---|---|---|
size
|
size |
Decreases the font-size of the chip's label |
|
|
accessible-label
|
accessibleLabel |
The accessible label for the form control / |
|
|
Methods
| Method Name | Description |
|---|---|
firstUpdated()
|
Events
None
CSS Shadow Parts
| Part Name | Summary | Description |
|---|---|---|
legend
|
The |
CSS Custom Properties
None
Design Tokens
| Token | Description | Copy |
|---|---|---|
--rh-space-lg
|
Chip group margin block spacing 16px spacer |
|
--rh-font-size-body-text-md
|
Legend font size 16px font size |
|
--rh-border-radius-pill
|
Clear all button border radius Pill border radius; Example: Label |
|
--rh-color-interactive-primary-default
|
Clear all button text color |
|
--rh-font-family-body-text
|
Legend body text font family Clear all button font family Body text font family |
|
--rh-line-height-body-text
|
Clear all button line height Line height for body text |
|
--rh-border-width-sm
|
Clear all button outline width 1px border width; Example: Secondary CTA or Button |
|
--rh-space-xs
|
Clear all button block padding 4px spacer |
|
--rh-space-md
|
Legend inline end spacing Clear all button inline padding 8px spacer |
|
--rh-color-interactive-primary-hover
|
Clear all button hover/focus text color |
|
--rh-color-border-subtle
|
Clear all button hover/focus outline color |
|
--rh-border-radius-default
|
Focus ring border radius 3px border radius; Example: Card |
|
--rh-length-4xs
|
Focus ring block inset 1px length token |
|
--rh-length-md
|
Focus ring inline inset 8px length token |
|
--rh-border-width-md
|
Clear all button focus outline offset Focus ring outline width 2px border width: Example: Alert |
|
--rh-color-border-interactive
|
Focus ring outline color |
|
--rh-font-size-body-text-sm
|
Clear all button font size Legend font size at small size 14px font size |
|
--rh-font-size-body-text-xs
|
Clear all button font size at small size 12px font size |
|
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
