2.22.1Chip List Component in Bolt
Chip-list can contain multiple chips. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.
npm install @bolt/components-chip-list
{% include "@bolt-components-chip-list/chip-list.twig" with {
items: [
{
text: "Chip 1",
url: "#!"
},
{
text: "Chip 2",
url: "#!"
},
{
text: "Chip 3",
url: "#!"
}
]
} only %}
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
| Prop Name | Description | Type | Default Value | Option(s) |
|---|---|---|---|---|
| items | An array of Chips. |
array
| — |
|
| size | Sets the size used for all of the chips (if size isn't specified on the individual chip) |
string
| — |
|
| truncate | Sets the max number of chips to show before truncating, 0 or greater |
number
| — |
|
| collapsible | Allows users to collapse items after expanding by clicking a close button. |
boolean
|
false
|
|
| id | Unique ID for Chip List, randomly generated if not provided (required for no-JS functionality). |
string
| — |
|
| contentItems | Deprecated (will be removed in Bolt v3.0) - use the |
array
| — |
|
| expanded | Shows truncated items. |
boolean
|
false
|
|