Chip List

An inline list of chips.
Twig Usage 
{% include '@bolt-components-chip-list/chip-list.twig' with {
  items: [
    {
      text: 'Chip 1',
      url: '#!'
    },
    {
      text: 'Chip 2',
      url: '#!'
    },
    {
      text: 'Chip 3',
      url: '#!'
    }
  ]
} only %}
 Schema
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 —
  • [items]:
    • Type:object
size

Sets the size used for all of the chips (if size isn't specified on the individual chip)

 string —
  • xsmall, small, medium
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)

Deprecated (will be removed in Bolt v3.0) - use the items prop instead.

 array —
  • [items]:
    • Type:object

      Chip.
Advanced Schema Options
expanded

Shows truncated items.

 boolean false
  • —
Install Install 
npm install @bolt/components-chip-list
Dependencies @bolt/components-chip @bolt/components-list @bolt/core @bolt/elements-icon