ChipList Component

The ChipList component displays a collection of chips that can be used to represent multiple items in a compact form. It supports various selection modes, chip deletion, and customization options.

Usage

To import and use the ChipList component in your application, use the following code snippet:

import { ChipList } from "@syncfusion/react-buttons";

<ChipList chips={['Apple', 'Banana', 'Cherry']} selection='Multiple' removable={true} />

import { ChipList } from "@syncfusion/react-buttons";

<ChipList chips={['Apple', 'Banana', 'Cherry']} selection='Multiple' removable={true} />

Demos

Explore the demos of the React ChipList component. Refer to this page.

Props

The following table outlines the props for the ChipList component:

Name	Type	Default	Description
chips	string[] \| ChipItemProps[]	[ ]	This chips property helps to render ChipList component.
disabled	boolean	false	Specifies a value that indicates whether the ChipList component is disabled or not.
removable	boolean	false	Enables or disables the delete functionality of a ChipList.
selectedChips	number[]	[ ]	Specifies the selected chip items in the ChipList.
selection	SelectionType	'None'	Defines the selection type of the ChipList. The available types are single, multiple, and none.

Methods

The following table outlines the methods for the ChipList component:

Name	Parameters	Returns	Description
getSelectedChips	-	string[] \| ChipItemProps[]	Gets the selected chips from the ChipList.

Events

The following table outlines the events for the ChipList component:

Name	Type	Description
onDelete	(event: ChipListDeleteEvent) => void	Triggers when the chip item is removed.
onSelect	(event: ChipListSelectEvent) => void	Triggers when the selected chips in the ChipList change.