chip list docs

2.22.0

Chip List

Chip List Component in Bolt

Chip-list can contain multiple chips. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
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
  • [items]:
    • Type: object

      Chip.

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 (will be removed in Bolt v3.0) - use the items prop instead.

array
  • [items]:
    • Type: object

      Chip.

Open Accordion Close Accordion
expanded

Shows truncated items.

boolean false

chip list

Chip list with links

Chip list with text

  • Do not include any data or information in your posts that are confidential!
  • Apply basic practices for collaborative work.
  • Be honest, respectful, trustworthy and helpful.
  • Answer questions authoritatively and concisely. Avoid cluttering discussions with noise.

chip list size

chip list truncate

Truncated chip list

chip list collapsible

Truncated chip list that can collapse after expanding

Debug Panel