chip list docs

Chip List

An inline list of chips.

Published Last updated: 4.0.0 Change log Github NPM
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-v3.x

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

Beginner User Interface Reporting Mobile Pega Platform Application Development Case Management Robotic Process Automation Data Integration

chip list collapsible

Truncated chip list that can collapse after expanding

Beginner User Interface Reporting Mobile Pega Platform Application Development Case Management Robotic Process Automation Data Integration