Chip
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-group>
<rh-chip>Edge</rh-chip>
<rh-chip checked>AI/ML</rh-chip>
<rh-chip>DevOps</rh-chip>
</rh-chip-group>
<script type="module">
import '@rhds/elements/rh-chip/rh-chip-group.js';
</script>rh-chip
A chip is used to filter information or indicate that a selection was made.
| Slot Name | Description |
|---|---|
|
The label of the checkbox |
| 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 |
|
|
| Event Name | Description |
|---|---|
chip-checked |
when chip is checked/unchecked |
| Part Name | Description |
|---|---|
chip |
The main chip container |
| Token | Copy |
|---|---|
--rh-border-radius-default
|
|
--rh-border-radius-pill
|
|
--rh-border-width-md
|
|
--rh-border-width-sm
|
|
--rh-color-blue-10
|
|
--rh-color-blue-30
|
|
--rh-color-blue-50
|
|
--rh-color-blue-70
|
|
--rh-color-border-interactive
|
|
--rh-color-border-subtle
|
|
--rh-color-gray-30
|
|
--rh-color-gray-40
|
|
--rh-color-surface-dark
|
|
--rh-color-text-secondary
|
|
--rh-font-family-body-text
|
|
--rh-font-size-body-text-sm
|
|
--rh-font-size-body-text-xs
|
|
--rh-length-3xs
|
|
--rh-length-md
|
|
--rh-line-height-body-text
|
|
--rh-space-lg
|
|
--rh-space-md
|
|
--rh-space-xs
|
|
rh-chip-group
Chip Group
| Slot Name | Description |
|---|---|
|
Place individual |
accessible-label |
An accessible label for the chip group. Content for this slot is put into the |
clear-all |
Customized text for the "Clear all" button |
| 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 / |
|
|
| Token | Copy |
|---|---|
--rh-border-radius-default
|
|
--rh-border-radius-pill
|
|
--rh-border-width-md
|
|
--rh-border-width-sm
|
|
--rh-color-border-interactive
|
|
--rh-color-border-subtle
|
|
--rh-color-interactive-primary-default
|
|
--rh-color-interactive-primary-hover
|
|
--rh-font-family-body-text
|
|
--rh-font-size-body-text-md
|
|
--rh-font-size-body-text-sm
|
|
--rh-font-size-body-text-xs
|
|
--rh-length-4xs
|
|
--rh-length-md
|
|
--rh-line-height-body-text
|
|
--rh-space-lg
|
|
--rh-space-md
|
|
--rh-space-xs
|
|
