Types in React Chips component

2 Mar 202622 minutes to read

The Chips component supports four primary types, each serving a different functional purpose. Choose the appropriate type based on the interaction pattern and use case.

Input Chip - For collecting and organizing user-provided values
Choice Chip - For single selection from a set of options
Filter Chip - For multi-selection from a set of options
Action Chip - For triggering actions or displaying interactive content

Input chip

Input chips hold user-generated information in a compact form. They allow users to enter, tag, or organize data efficiently. This type is ideal for search tags, email recipients, or categorization.

The following example demonstrates how to create input chips:

app.jsx
app.tsx
index.css
index.html
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ChipListComponent, ChipsDirective, ChipDirective } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
// To render Chip.
function App() {
    return (<ChipListComponent id="chip-avatar" enableDelete={true} selection="Single">
        <ChipsDirective>
            <ChipDirective text="Andrew"></ChipDirective>
            <ChipDirective text="Janet"></ChipDirective>
            <ChipDirective text="Laura"></ChipDirective>
            <ChipDirective text="Margaret"></ChipDirective>
        </ChipsDirective>
    </ChipListComponent>);
}
export default App;
ReactDom.render(<App />, document.getElementById('chip'));
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ChipListComponent, ChipsDirective, ChipDirective } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

// To render Chip.
function App() {
    return (
        <ChipListComponent id="chip-avatar" enableDelete={true} selection="Single">
            <ChipsDirective>
                <ChipDirective text="Andrew"></ChipDirective>
                <ChipDirective text="Janet"></ChipDirective>
                <ChipDirective text="Laura"></ChipDirective>
                <ChipDirective text="Margaret"></ChipDirective>
            </ChipsDirective>
        </ChipListComponent>
    );
}
export default App;
ReactDom.render(<App />, document.getElementById('chip'));
#loader {
	color: #008cff;
	height: 40px;
	left: 45%;
	position: absolute;
	top: 45%;
	width: 30%;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Chips</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-react-buttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='chip'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

Choice chip

Allow users to select a single chip from a set of options by setting the selection property to Single. Choice chips are ideal for radio-button-like selection patterns where only one option can be active at a time. Common use cases include view options, sorting preferences, or theme selection.

The following example demonstrates single selection with choice chips:

app.jsx
app.tsx
index.css
index.html
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ChipListComponent, ChipsDirective, ChipDirective } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
// To render Chip.
function App() {
    return (<ChipListComponent id="chip-avatar" selection="Single">
        <ChipsDirective>
            <ChipDirective text="Small"></ChipDirective>
            <ChipDirective text="Medium"></ChipDirective>
            <ChipDirective text="Large"></ChipDirective>
            <ChipDirective text="Extra Large"></ChipDirective>
        </ChipsDirective>
    </ChipListComponent>);
}
export default App;
ReactDom.render(<App />, document.getElementById('chip'));
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ChipListComponent, ChipsDirective, ChipDirective } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

// To render Chip.
function App() {
    return (
        <ChipListComponent id="chip-avatar" selection="Single">
            <ChipsDirective>
                <ChipDirective text="Small"></ChipDirective>
                <ChipDirective text="Medium"></ChipDirective>
                <ChipDirective text="Large"></ChipDirective>
                <ChipDirective text="Extra Large"></ChipDirective>
            </ChipsDirective>
        </ChipListComponent>
    );
}
export default App;
ReactDom.render(<App />, document.getElementById('chip'));
#loader {
	color: #008cff;
	height: 40px;
	left: 45%;
	position: absolute;
	top: 45%;
	width: 30%;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Chips</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-react-buttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='chip'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

Filter chip

Enable users to select multiple chips from a set of options by setting the selection property to Multiple. Filter chips are ideal for checkbox-like selection patterns where multiple options can be active simultaneously. Use cases include category filtering, skill selection, or preference checkboxes.

The following example demonstrates multiple selection with filter chips:

app.jsx
app.tsx
index.css
index.html
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ChipListComponent, ChipsDirective, ChipDirective } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
// To render Chip.
function App() {
    return (<ChipListComponent id="chip-avatar" selection="Multiple">
        <ChipsDirective>
            <ChipDirective text="Chai"></ChipDirective>
            <ChipDirective text="Chung"></ChipDirective>
            <ChipDirective text="Aniseed Syrup"></ChipDirective>
            <ChipDirective text="Ikura"></ChipDirective>
        </ChipsDirective>
    </ChipListComponent>);
}
export default App;
ReactDom.render(<App />, document.getElementById('chip'));
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ChipListComponent, ChipsDirective, ChipDirective } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);

// To render Chip.
function App() {
    return (
        <ChipListComponent id="chip-avatar" selection="Multiple">
            <ChipsDirective>
                <ChipDirective text="Chai"></ChipDirective>
                <ChipDirective text="Chung"></ChipDirective>
                <ChipDirective text="Aniseed Syrup"></ChipDirective>
                <ChipDirective text="Ikura"></ChipDirective>
            </ChipsDirective>
        </ChipListComponent>
    );
}
export default App;
ReactDom.render(<App />, document.getElementById('chip'));
#loader {
	color: #008cff;
	height: 40px;
	left: 45%;
	position: absolute;
	top: 45%;
	width: 30%;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Chips</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-react-buttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='chip'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

Action chip

Action chips trigger specific events or actions when interacted with. Unlike selection-focused chips, action chips are designed to perform operations such as opening dialogs, submitting forms, or executing commands. Use action chips for buttons, calls-to-action, or interactive content.

app.jsx
app.tsx
index.css
index.html
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ChipListComponent, ChipsDirective, ChipDirective } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
// To render Chip.
function App() {
  function chipClick(e) {
    alert('you have clicked ' + e.target.textContent);
  }
  return (<ChipListComponent id="chip-avatar" onClick={chipClick.bind(this)}>
    <ChipsDirective>
      <ChipDirective text="Send a text" />
      <ChipDirective text="Set a remainder" />
      <ChipDirective text="Read my emails" />
      <ChipDirective text="Set alarm" />
    </ChipsDirective>
  </ChipListComponent>);
}
export default App;
ReactDom.render(<App />, document.getElementById('chip'));
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ChipListComponent, ChipsDirective, ChipDirective } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';


enableRipple(true);

// To render Chip.
function App() {
  function chipClick(e: any) {
    alert('you have clicked ' + e.target.textContent);
  }
  return (
    <ChipListComponent id="chip-avatar" onClick={chipClick.bind(this)}>
      <ChipsDirective>
        <ChipDirective text="Send a text" />
        <ChipDirective text="Set a remainder" />
        <ChipDirective text="Read my emails" />
        <ChipDirective text="Set alarm" />
      </ChipsDirective>
    </ChipListComponent>
  );
}
export default App;
ReactDom.render(<App />, document.getElementById('chip'));
#loader {
	color: #008cff;
	height: 40px;
	left: 45%;
	position: absolute;
	top: 45%;
	width: 30%;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Chips</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-react-buttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='chip'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

Deletable chip

Enable users to remove chips from the list by setting the enableDelete property to true. A delete icon appears on each chip, allowing users to remove items by clicking it. This feature works with input chips and filter chips to provide a dismissible, user-controlled list.

The following example demonstrates deletable chips:

app.jsx
app.tsx
index.css
index.html
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ChipListComponent, ChipsDirective, ChipDirective } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
// To render Chip.
function App() {
    return (<ChipListComponent id="chip-avatar" enableDelete={true}>
        <ChipsDirective>
            <ChipDirective text="Send a text"></ChipDirective>
            <ChipDirective text="Set a remainder"></ChipDirective>
            <ChipDirective text="Read my emails"></ChipDirective>
            <ChipDirective text="Set alarm"></ChipDirective>
        </ChipsDirective>
    </ChipListComponent>);
}
export default App;
ReactDom.render(<App />, document.getElementById('chip'));
import * as React from 'react';
import * as ReactDom from 'react-dom';
import { ChipListComponent, ChipsDirective, ChipDirective } from '@syncfusion/ej2-react-buttons';
import { enableRipple } from '@syncfusion/ej2-base';


enableRipple(true);

// To render Chip.
function App() {
  return (
    <ChipListComponent id="chip-avatar" enableDelete={true}>
      <ChipsDirective>
        <ChipDirective text="Send a text"></ChipDirective>
        <ChipDirective text="Set a remainder"></ChipDirective>
        <ChipDirective text="Read my emails"></ChipDirective>
        <ChipDirective text="Set alarm"></ChipDirective>
      </ChipsDirective>
    </ChipListComponent>
  );
}
export default App;
ReactDom.render(<App />, document.getElementById('chip'));
#loader {
	color: #008cff;
	height: 40px;
	left: 45%;
	position: absolute;
	top: 45%;
	width: 30%;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Chips</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-react-buttons/styles/tailwind3.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='chip'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

Search docs

Ask HelpBot