Simple content represented in a compact element.
Single and multiple selection are supported.
Built-in support to disable, remove, and customize chip lists.

4.5 / 5

(600+ Reviews)

Trusted by the world’s leading companies

React chiplist

Overview

The React ChipList component is a collection of chips that provides small blocks of text information. A ChipList can also contain avatars, images, letters, and close icons. It can be used as tags when filtering contacts and email inboxes, selecting choices from available options, and providing input to an application.

React ChipList

React ChipList code example

Get started with the React ChipList using a few lines of TSX code, as demonstrated below. Also, explore this React ChipList demo, which shows how to render and configure a ChipList in React.

import { ChipList, ChipItemProps } from '@syncfusion/react-buttons';
import UserIcon from './user-icon';

export default function App() {
    const users: ChipItemProps[] = [
        { text: 'Margaret', value: '1', leadingIconUrl: 'https://react.syncfusion.com/images/common/margaret.png' },
        { text: 'Michael', value: '2', leadingIcon: <UserIcon /> }
    ];

    return (
        <div className="component-section">
            <ChipList chips={users} aria-label='User display list'>
            </ChipList>
        </div>
    );
}

Filter chips

The React ChipList supports both single and multiple selection modes, allowing users to choose one or more chips from a group based on the interaction requirements. The select icon is customizable.

React ChipList selection

React removable chip list

Dynamic chips

An individual chip can be removed from a group using the delete icon. This interaction allows dynamic management of chip collections. The remove icon is customizable as needed.

React ChipList removable demo

ChipList UI customization

Enhance the appearance of the ChipList component with color customization options to better match your application’s design.

React ChipList customization demo

React customized chip list

Controlled mode

Controlled mode in the ChipList component allows users to manage the component’s state explicitly through React state hooks instead of relying on the component’s internal state. This gives users more control over the component’s behavior and enables integration with other parts of the application.

React ChipList controlled mode demo

Other Supported Major Frameworks

In addition to React, built-in integration is available for these major frameworks.

Remix

Preact

Gatsby

Vite

Next.js

Not sure how to create your first React ChipList? Our documentation can help.

I’d love to read it now

Developed using React’s core principles, this library employs functional components and hooks without any external dependencies.

GRIDS

Data Grid

DATA VISUALIZATION

Charts

NAVIGATION

BUTTONS

INPUTS

LAYOUT

NOTIFICATIONS

Frequently Asked Questions

✅ Why should you choose the Syncfusion^® React ChipList?

The Syncfusion React ChipList provides the following features:

Representation of simple content in a compact element.
Single and multiple selection types, plus a built-in remove icon.
Extensive customization options.
Simple configuration and APIs.
Support for all modern browsers.
Expansive learning demos to help you learn quickly and get started with React ChipList.

✅ Where can I find the Syncfusion React ChipList demo?

Find our React ChipList demo here. It demonstrates how to render and configure the ChipList.

✅ Can I download and utilize the Syncfusion React ChipList for free?

No, this is a commercial product and requires a paid license. However, a free Community License is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue, 5 or fewer developers, and 10 or fewer total employees.

✅ How do I get started with the Syncfusion React ChipList?

A good place to start would be our comprehensive getting started documentation.

See Real Success Stories

Developers around the world trust Syncfusion’s Essential Studio to simplify complex projects and speed up delivery. With a vast library of UI controls, powerful SDKs, and reliable support, Essential Studio helps teams build enterprise-ready applications with confidence.

Explore Case Studies

Industry

Software development

75%Cost reduction

50%Faster development

“If somebody is looking for a great tool to work with? Yes. I would definitely recommend Syncfusion for anyone who is trying to develop something meaningful.”

- Somnath Maji (Founder of Igniatek Consultancy)

Read Story