React Chip

The React Chip component is a versatile, compact UI element that represents discrete information, attributes, or actions in an easily recognizable format. Chip can be customized with various styles, colors, and interactive elements like icons and avatars to enhance visual communication and user experience.

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 Chip component to the project.

Installing Syncfusion® React packages

To use the React Chip 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 Chip 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 Chip component

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

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

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

import { Chip } from '@syncfusion/react-buttons';
import './App.css';

export default function App() {
    return (
        <div className="component-section">
            <Chip>Anne</Chip>
            <Chip>John</Chip>
            <Chip>Margaret</Chip>
        </div>
    );
}

Run the project

To run the project, use the following command:

npm run dev

The following example demonstrates the basic implementation of the Chip component with default styling. These chips display discrete information in a compact, interactive format.

Removable chip

Removable chips include a delete icon that allows users to remove the chip. These are ideal the interface where users need to add or remove items dynamically. Click the delete icon to remove it from the collection. To create a removable chip, set the removable property to true and implement an onDelete event handler to manage the removal logic when the delete icon is clicked.

Disabled chip

Disabled chips indicate non-interactive content that remains visible but cannot be selected or interacted with. These are useful for showing unavailable options while maintaining context for the user. To disable a chip, set the disabled property to true. Disabled chips maintain their visual appearance but don't respond to user interactions.

Customization

Chips can be customized in various ways to meet different design requirements and use cases. The following examples demonstrate different customization options including colors, outlines, avatars, and custom icons to enhance the visual appearance and functionality of chips.

Colors

Color-coded chips use different background colors to visually categorize content or indicate different states. The color property allows you to apply predefined theme colors (primary, info, error, success, and warning) to chips, helping users quickly distinguish between different items.

Variants

Outlined chips have colored borders instead of filled backgrounds. They stand out less than filled chips but still use colors (in the border and text) to help users tell different items apart. This style creates a more refined look while maintaining visual differences through the colored outlines and text. To use filled mode for Chip, simply set the variant property to filled. To create outlined Chip, set the variant property to outlined. In this sample, the chips are displayed in outlined mode.

Avatar and icons

Enhance your chips with visual elements like avatars, icons, and custom styling to improve recognition and user experience. This example demonstrates how to incorporate profile images for team members and a custom icon for the last chip, making information more identifiable at a glance. To add images to Chip, use the leadingIconUrl property to specify the image path. For custom SVG icons, use the leadingIcon property with JSX elements.

Anne

John

DDavid

Template

Chips can be customized to display dynamic content. This example shows time zone chips that update in real-time, displaying current times for different regions around the world. The sample demonstrates how to create chips with custom content instead of simple text, and display live-updating information using React hooks.

Accessibility

The Chip 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 Chip 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 Chip component followed the WAI-ARIA patterns to meet the accessibility. The following ARIA attributes are used in the Chip component:

Keyboard interaction

The Chip 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 Chip component.