import { Chip } from '@uhg-abyss/mobile';<Chip>Chip</Chip>;useState
Pass the value from the useState hook to the isChecked prop to set the checked state of the chip.
Group
Group has three variants: wrap, scroll and fit. The wrap variant is the default.
Wrap
Chips can be wrapped in a Group. When using this to group multiple chips together, a chip that is too long to stack horizontally wraps to the next line.
This variant allows any number of chips to be selected when each chip has an isChecked and onChange.
Alternatively, passing the state into the Group (and not individual chips) will allow only one chip to be selected at a time.
Scroll
This variant has a filter button for selection and the chips scroll horizontally.
Only one chip can be selected in this group. The heading prop is used to display a heading on the bottom sheet.
Fit
This variant does not scroll or have a filter button. The chips will fit the width of the parent container.
Like the wrap variant, multiple chips can be selected when each chip has an isChecked and onChange, and only one chip can be selected when the state is passed into the Group (as shown).
Icons
Use the icon prop to pass in a specific Icon component. Icons should be 20px and given an accurate title to meet accessibility standards. Find further guidance on icons symbols in the Icons Symbols Tab.
Dismissible Chips
Use the isClosable prop with the onClose function to allow a chip to be dismissed. The checked and pressed states are not enabled with a dismissible chip.
Disabled
Use the isDisabled prop to disable a chip.
Tag
Use the isTag prop to create a non-clickable chip.
Width
Chips do not wrap if the text gets longer than the width of the parent container. Instead, the text will truncate.
Chip Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| children | node | - | The text to be input into the Chip component |
| icon | node | - | Adds an icon to the Chip component |
| isChecked | boolean | false | Flag to check the chip and enable selected border |
| isClosable | boolean | false | Adds a close icon to the Chip component. Use with the onClose function to dismiss the chip |
| isDisabled | boolean | false | Disables a chip, making it unusable and un-clickable |
| isTag | boolean | false | Creates a tag. A smaller, non-clickable version of chip |
| onChange | function | - | Callback fired when the chip is pressed |
| onClose | function | - | Callback fired when the close button is pressed |
| value | string | - | Value of the chip |
Chip Classes
| Class Name | Description |
|---|---|
| abyss-chip-close-button | Close icon container |
| abyss-chip-close-icon | Close icon |
| abyss-chip-label | Chip label element |
| abyss-chip-root | Chip root element |
Chip.Group Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| children | node | - | The chips to be input into the Chip Group component |
| heading | string | - | The heading displayed on the bottom sheet in the scroll variant |
| onChange | function | - | Callback fired when the chip is pressed |
| value | string | - | The value of the selected chip |
| variant | string | - | The variant of the Chip Group. Options are wrap, scroll, and fit |
Chip.Group Classes
| Class Name | Description |
|---|---|
| abyss-chip-group-root | Chip group root element |
| abyss-chip-group-tab-bar | Chip group tab bar element |
| abyss-chip-group-tab-bar-bottom-sheet | Chip group tab bar bottom sheet element |
| abyss-chip-group-tab-bar-menu-button | Chip group tab bar menu button element |
| abyss-chip-group-tab-bar-menu-icon | Chip group tab bar menu icon element |
Chip Translations
| Translation Key | Value |
|---|---|
| Chip.remove | remove |
| Chip.openMenu | Open tab menu |
Chip Tokens
| Token Name | Value | |
|---|---|---|
| chip.color.surface.container.default | #F3F3F3 | |
| chip.color.surface.container.selected | #EDF3FB | |
| chip.color.text.label.default | #323334 | |
| chip.color.text.label.selected | #002677 | |
| chip.color.icon.close | #4B4D4F | |
| chip.color.border.container.default | #929496 | |
| chip.color.border.container.selected | #0C55B8 | |
| chip.border-radius.all.container | 500 | |
| chip.border-width.all.container.default | 0 | |
| chip.border-width.all.container.selected | 2 | |
| chip.sizing.all.icon.close | 20 | |
| chip.spacing.padding.vertical.container | 8 | |
| chip.spacing.padding.horizontal.container | 16 | |
| chip.spacing.gap.horizontal.container | 8 |
Chip.Group Props
| V2 | V1 | Status |
|---|---|---|
| children | children | Unchanged |
| heading | title | Renamed |
| onChange | onChange | Unchanged |
| value | value | Unchanged |
| variant | variant | Unchanged |