Chip List

An inline list of chips.

Published

Last updated: 2.26.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

npm install @bolt/components-chip-list

Dependencies

@bolt/components-chip

@bolt/components-list

@bolt/core-v3.x

Chip list with links

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 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 with size set on parent

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.

Truncated chip list

Beginner

User Interface

Reporting

Mobile

Pega Platform

Truncated chip list that can collapse after expanding

Beginner

User Interface

Reporting

Mobile

Pega Platform

chips list

chip list docs

Chip List

An inline list of chips.

chip list

Chip list with links

Chip list with text

chip list size

Chip list with size set on parent

chip list truncate

Truncated chip list

chip list collapsible

Truncated chip list that can collapse after expanding

chips list

chip list docs Show Code Hide Code

Chip List

An inline list of chips.

chip list Show Code Hide Code

Chip list with links

Chip list with text

chip list size Show Code Hide Code

Chip list with size set on parent

chip list truncate Show Code Hide Code

Truncated chip list

chip list collapsible Show Code Hide Code

Truncated chip list that can collapse after expanding

chip list docs

chip list

chip list size

chip list truncate

chip list collapsible