Chip
On this page
On this page
Overview
A chip is used to filter information or indicate that a selection was made.
Edit element properties
import '@rhds/elements/rh-chip/rh-chip.js';<rh-chip>Chip</rh-chip>Whether the chip is checked.
Whether the chip is disabled.
Set a custom string for the input's value attribute. Defaults to on.
Status
What do these mean?
- Figma library:
-
Ready - RH Elements:
-
Ready - RH Shared Libs:
-
Planned
When to use
- Allow users to select from a list of options
- Indicate to users what selections they made
- Represent a checkbox group with more emphasis
Four chips in a chip group with the words "Filter by" as the legend at the start. The middle two chips are selected with a blue background and corresponding "X". The button to clear all selected chips is on the right.
Status checklist
| Property | Status | Meaning |
|---|---|---|
| Figma library |
|
Component is available in the Figma library |
| RH Elements |
|
Component is available in the RH Elements repo |
| RH Shared Libs |
|
Component should be added to the RH Shared Libs repo at a later date |
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
