Chip
On this page
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>rh-chip
A chip is used to filter information or indicate that a selection was made.
| Slot Name | Summary | Description |
|---|---|---|
[default]
|
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 | Summary | Description |
|---|---|---|
chip
|
The main chip container |
| Token | Summary | Copy |
|---|---|---|
--rh-space-lg
|
|
|
--rh-font-family-body-text
|
|
|
--rh-line-height-body-text
|
|
|
--rh-border-radius-pill
|
|
|
--rh-border-width-sm
|
|
|
--rh-color-border-subtle
|
|
|
--rh-space-xs
|
|
|
--rh-font-size-body-text-sm
|
|
|
--rh-font-size-body-text-xs
|
|
|
--rh-border-radius-default
|
|
|
--rh-length-3xs
|
|
|
--rh-length-md
|
|
|
--rh-border-width-md
|
|
|
--rh-color-border-interactive
|
|
|
--rh-color-text-secondary
|
|
|
--rh-color-gray-40
|
|
|
--rh-color-gray-30
|
|
|
--rh-color-surface-dark
|
|
|
--rh-color-blue-70
|
|
|
--rh-color-blue-10
|
|
|
--rh-color-blue-30
|
|
|
--rh-color-blue-50
|
|
|
--rh-space-md
|
|
rh-chip-group
Chip Group
| Slot Name | Summary | Description |
|---|---|---|
accessible-label
|
An accessible label for the chip group.
Content for this slot is put into the |
|
[default]
|
Place individual |
|
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 / |
|
|
| Method Name | Description |
|---|---|
firstUpdated()
|
| Part Name | Summary | Description |
|---|---|---|
legend
|
| Token | Summary | Copy |
|---|---|---|
--rh-space-lg
|
|
|
--rh-font-size-body-text-md
|
|
|
--rh-border-radius-pill
|
|
|
--rh-color-interactive-primary-default
|
|
|
--rh-font-family-body-text
|
|
|
--rh-line-height-body-text
|
|
|
--rh-border-width-sm
|
|
|
--rh-space-xs
|
|
|
--rh-space-md
|
|
|
--rh-color-interactive-primary-hover
|
|
|
--rh-color-border-subtle
|
|
|
--rh-border-radius-default
|
|
|
--rh-length-4xs
|
|
|
--rh-length-md
|
|
|
--rh-border-width-md
|
|
|
--rh-color-border-interactive
|
|
|
--rh-font-size-body-text-sm
|
|
|
--rh-font-size-body-text-xs
|
|
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.
