React Chip List

The ChipList component is a specialized container that manages collections of Chip elements in a cohesive, organized manner. While individual Chip components represent discrete pieces of information, the ChipList provides structure and consistent behavior for multiple chips displayed together.

Getting started

To create a new Vite project, refer to the Vite documentation. Once that Vite project is ready to run with default settings, let’s add the React ChipList component to the project.

Installing Syncfusion® React packages

To use the React ChipList component in this project, the @syncfusion/react-buttons package needs to be installed using the following command:

npm install @syncfusion/react-buttons

Adding CSS reference

In this article, the Material theme is applied using CSS styles, which are available in installed packages. The necessary Material CSS styles for the ChipList component and its dependents were imported into the src/App.css file.

@import '../node_modules/@syncfusion/react-base/styles/material.css';
@import '../node_modules/@syncfusion/react-buttons/styles/material.css';

Adding ChipList component

To include the ChipList component in your application, import the ChipList from the @syncfusion/react-buttons package in App.tsx.

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

Add the ChipList component in application as shown in below code example.

import { ChipList, ChipItemProps } from '@syncfusion/react-buttons';
import MargaretImage from '../chip/images/margaret.png';
import UserIcon from '../chip/user-icon';
import './App.css';

export default function App() {
    const users: ChipItemProps[] = [
        { text: 'Margaret', value: '1', leadingIconUrl: MargaretImage },
        { text: 'Michael', value: '2', leadingIcon: <UserIcon /> }
    ];

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

Run the project

To run the project, use the following command:

npm run dev

The ChipList component renders a collection of chip with consistent styling and behavior. This example shows chips with avatars and icons, demonstrating how to display user information in a compact, recognizable format ideal for user lists, participant rosters, or assignee selections.

Single selection

Enable selection of exactly one option from a group with the single-selection ChipList. This interaction pattern is ideal for mutually exclusive choices where only one option can be active at a time, such as filter categories, view modes, or exclusive settings. To enable single selection mode, set the selection property to single. This ensures that only one chip can be selected at a time.

Multiple selection

Allow users to select multiple options simultaneously with multiple-selection ChipList. This example demonstrates predefined selections with chips at indexes 0 and 1 already selected. To enable multiple selection mode, set the selection property to multiple. Use the selectedChips property to preselect chips by specifying an array of indexes.

Removable chips

Combine selection with removal functionality to create dynamic ChipList where users can both select and remove options. This pattern is particularly useful for managing applied filters, selected features, or chosen categories where users need to both indicate preferences and remove unwanted options. To make chips removable, set the removable property to true. This adds a delete icon to each chip and enables removal functionality.

Customization

Enhance the appearance and functionality of ChipList components with various customization options to better match your application's design requirements.

Color customization

This example demonstrates how chips can be customized with different background colors to visually distinguish categories. Use the className property to apply custom styles directly to individual chips. In this example, different background colors with white text are applied to categorize content visually.

Custom select icon

Custom select icons replace the default selection indicator with custom SVG graphics for a more branded look, while maintaining the chip's selection functionality. The example shows color-coded chips with custom selection styles. To customize the selection icon, add a className to the ChipList and use CSS to override the default icon styling.

Custom remove icon

Custom remove icons replace the default deletion button with custom SVG graphics, creating a more cohesive design. This example replaces the standard remove icon with a circular minus symbol while maintaining the chip's removal functionality. To customize the remove icon, add a className to the ChipList and use CSS to override the default icon styling.

Controlled mode

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

Controlled selection

The ChipList component allows you to control which chips are selected by using the selectedChips property along with the onSelect event handler. This approach gives you complete control over the selection state, making it easy to implement custom logic or synchronize selections with other components in your application.

Controlled chips

You can also control the actual collection of chips displayed in the ChipList component. By providing the chips array as a state variable and handling the onDelete event, you can dynamically manage the chips based on user interactions or application logic.

Accessibility

The ChipList component followed the accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2 standards, and WCAG roles that are commonly used to evaluate accessibility.

The accessibility compliance for the ChipList component is outlined below.

- All features of the component meet the requirement.

- Some features of the component do not meet the requirement.

- The component does not meet the requirement.

WAI-ARIA attributes

The ChipList component followed the WAI-ARIA patterns to meet the accessibility. The following ARIA attributes are used in the ChipList component:

Keyboard interaction

The ChipList component followed the keyboard interaction guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the ChipList component.