Represents the Essential JS 2 React ChipList Component.
<ChipListComponent></ChipListComponent> string
Specifies the icon CSS class for the avatar in the chip.
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<style>
#chip .anne {
background-image: url('https://ej2.syncfusion.com/react/demos/src/chips/images/anne.png');
}
</style>
</head>
<body class="material">
<div id='sample'>
</body>
</html> import { render } from 'react-dom';
import { ChipListComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import { SampleBase } from './sample-base';
export class Default extends SampleBase {
Icon = "anne";
render() {
return (
<ChipListComponent id="chip" text="Janet Leverling" avatarIconCss={this.Icon}>
</ChipListComponent>
);
}
}
render(<Default />, document.getElementById('sample'));Defaults to ”
string
Specifies the customized text value for the avatar in the chip.
import { render } from 'react-dom';
import './index.css';
import { ChipListComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import { SampleBase } from './sample-base';
export class Default extends SampleBase {
text = 'J';
render() {
return (
<ChipListComponent id="chip-default" text="Janet Leverling" avatarText= {this.text}>
</ChipListComponent>
);
}
}
render(<Default />, document.getElementById('sample'));Defaults to ”
string[] | number[] | ChipModel[]
This chips property helps to render ChipList component.
import { render } from 'react-dom';
import * as ReactDom from 'react-dom';
import { ChipListComponent, ChipsDirective, ChipDirective } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import { SampleBase } from './sample-base';
export class Default extends SampleBase {
render() {
return (
<ChipListComponent id="chip-avatar">
<ChipsDirective>
<ChipDirective text="Small"></ChipDirective>
<ChipDirective text="Medium"></ChipDirective>
<ChipDirective text="Large"></ChipDirective>
<ChipDirective text="Extra Large"></ChipDirective>
</ChipsDirective>
</ChipListComponent>
);
}
}
render(<Default />, document.getElementById('sample'));Defaults to []
string
Specifies the custom classes to be added to the chip element used to customize the ChipList component.
import { render } from 'react-dom';
import { ChipListComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import { SampleBase } from './sample-base';
export class Default extends SampleBase {
style = "e-outline"
render() {
return (
<ChipListComponent text="Janet Leverling" cssClass={this.style}>
</ChipListComponent>
);
}
}
render(<Default />, document.getElementById('sample'));Defaults to ”
boolean
Enables or disables the delete functionality of a chip.
import { render } from 'react-dom';
import * as ReactDom from 'react-dom';
import { ChipListComponent, ChipsDirective, ChipDirective } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import { SampleBase } from './sample-base';
export class Default extends SampleBase {
bool = "true"
render() {
return (
<ChipListComponent id="chip-avatar" enableDelete={this.bool}>
<ChipsDirective>
<ChipDirective text="Andrew"/>
<ChipDirective text="Janet"/>
<ChipDirective text="Laura"/>
<ChipDirective text="Margaret"/>
</ChipsDirective>
</ChipListComponent>
);
}
}
render(<Default />, document.getElementById('sample'));Defaults to false
boolean
Enable or disable persisting component’s state between page reloads.
Defaults to false
boolean
Enable or disable rendering component in right to left direction.
Defaults to false
boolean
Specifies a value that indicates whether the chip component is enabled or not.
Defaults to true
{ : }
Allows additional HTML attributes such as aria labels, title, name, etc., and accepts n number of attributes in a key-value pair format.
Defaults to {}
string
Specifies the leading icon CSS class for the chip.
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<style>
#chip .janet {
background-image: url('https://ej2.syncfusion.com/react/demos/src/chips/images/janet.png');
}
</style>
</head>
<body class="material">
<div id='sample'>
</body>
</html> import { render } from 'react-dom';
import { ChipListComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import { SampleBase } from './sample-base';
export class Default extends SampleBase {
Icon = "janet";
render() {
return (
<ChipListComponent id="chip" text="Janet Leverling" leadingIconCss={this.Icon}>
</ChipListComponent>
);
}
}
render(<Default />, document.getElementById('sample'));Defaults to ”
string
Specifies the leading icon url for the chip.
Defaults to ”
string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
Defaults to ”
string[] | number[] | number
Sets or gets the selected chip items in the chip list.
import { render } from 'react-dom';
import { ChipDirective, ChipListComponent, ChipsDirective } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import { SampleBase } from './sample-base';
export class Default extends SampleBase {
choice=[1,3];
render() {
return (
<ChipListComponent id="chip-filter" selectedChips={this.choice} selection="Multiple">
<ChipsDirective>
<ChipDirective text="Extra small"></ChipDirective>
<ChipDirective text="Small"></ChipDirective>
<ChipDirective text="Medium"></ChipDirective>
<ChipDirective text="Large"></ChipDirective>
<ChipDirective text="Extra large"></ChipDirective>
</ChipsDirective>
</ChipListComponent>
);
}
}
render(<Default />, document.getElementById('sample'));Defaults to []
Defines the selection type of the chip. The available types are:
Defaults to ‘None’
string
Specifies the text content for the chip.
import { render } from 'react-dom';
import { ChipListComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import { SampleBase } from './sample-base';
export class Default extends SampleBase {
name = "Janet Leverling";
render() {
return (
<ChipListComponent text={this.name}>
</ChipListComponent>
);
}
}
render(<Default />, document.getElementById('sample'));Defaults to ”
string
Specifies the trailing icon CSS class for the chip.
import { render } from 'react-dom';
import { ChipListComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import { SampleBase } from './sample-base';
export class Default extends SampleBase {
Icon = "e-dlt-btn";
render() {
return (
<ChipListComponent id="chip" text="Janet Leverling" trailingIconCss={this.Icon}>
</ChipListComponent>
);
}
}
render(<Default />, document.getElementById('sample'));Defaults to ”
string
Specifies the trailing icon url for the chip.
Defaults to ”
Allows adding the chip item(s) by passing a single or array of string, number, or ChipModel values.
| Parameter | Type | Description |
|---|---|---|
| chipsData | string[] | number[] | ChipModel[] | string | number | ChipModel |
We can pass array of string or array of number or array of chip model or string data or number data or chip model. |
import { render } from 'react-dom';
import { ButtonComponent } from "@syncfusion/ej2-react-buttons";
import { ChipDirective, ChipListComponent, ChipsDirective } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import { SampleBase } from './sample-base';
export class Default extends SampleBase {
onClick(args) {
this.chip.add('jenifer');
}
render() {
return (
<div>
<ChipListComponent id="chip-avatar" ref={t => (this.chip = t)}>
<ChipsDirective>
<ChipDirective text="Andrew"></ChipDirective>
<ChipDirective text="Janet"></ChipDirective>
<ChipDirective text="Laura"></ChipDirective>
<ChipDirective text="Margaret"></ChipDirective>
</ChipsDirective>
</ChipListComponent>
<ButtonComponent onClick={this.onClick.bind(this)}>Add Item</ButtonComponent>
</div>
);
}
}
render(<Default />, document.getElementById('sample'));
```<br> |
Returns *void*
### destroy
Removes the component from the DOM and detaches all its related event handlers. Also, it removes the attributes and classes.
```tsx
import { render } from 'react-dom';
import { ButtonComponent } from "@syncfusion/ej2-react-buttons";
import { ChipDirective, ChipListComponent, ChipsDirective } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import { SampleBase } from './sample-base';
export class Default extends SampleBase {
onClick(args) {
this.chip.destroy();
}
render() {
return (
<div>
<ChipListComponent id="chip-avatar" ref={t => (this.chip = t)}>
<ChipsDirective>
<ChipDirective text="Andrew"></ChipDirective>
<ChipDirective text="Janet"></ChipDirective>
<ChipDirective text="Laura"></ChipDirective>
<ChipDirective text="Margaret"></ChipDirective>
</ChipsDirective>
</ChipListComponent>
<ButtonComponent onClick={this.onClick.bind(this)}>Destroy</ButtonComponent>
</div>
);
}
}
render(<Default />, document.getElementById('sample'));Returns void
A function that finds chip based on given input.
| Parameter | Type | Description |
|---|---|---|
| fields | number | HTMLElement |
We can pass index number or element of chip. |
import { render } from 'react-dom';
import { ButtonComponent } from "@syncfusion/ej2-react-buttons";
import { ChipDirective, ChipListComponent, ChipsDirective } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import { SampleBase } from './sample-base';
export class Default extends SampleBase {
onClick(args) {
let name = this.chip.find([3]).text;
alert('you have searched for ' +name);
}
render() {
return (
<div>
<ChipListComponent id="chip-filter" ref={t => (this.chip = t)} selection="Multiple">
<ChipsDirective>
<ChipDirective text="Andrew"></ChipDirective>
<ChipDirective text="Janet"></ChipDirective>
<ChipDirective text="Laura"></ChipDirective>
<ChipDirective text="Margaret"></ChipDirective>
</ChipsDirective>
</ChipListComponent>
<ButtonComponent onClick={this.onClick.bind(this)}>Find</ButtonComponent>
</div>
);
}
}
render(<Default />, document.getElementById('sample'));
```<br> |
Returns [*ChipDataArgs*](./chipDataArgs)
### getSelectedChips
Returns the selected chip(s) data.
```tsx
import { render } from 'react-dom';
import { ButtonComponent } from "@syncfusion/ej2-react-buttons";
import { ChipDirective, ChipListComponent, ChipsDirective } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import { SampleBase } from './sample-base';
export class Default extends SampleBase {
filterSelected = [1];
onClick(args) {
let name = this.chip.getSelectedChips().text;
alert('Selected chip is ' +name);
}
render() {
return (
<div>
<ChipListComponent id="chip-filter" ref={t => (this.chip = t)} selection="Single" selectedChips={this.filterSelected}>
<ChipsDirective>
<ChipDirective text="Andrew"></ChipDirective>
<ChipDirective text="Janet"></ChipDirective>
<ChipDirective text="Laura"></ChipDirective>
<ChipDirective text="Margaret"></ChipDirective>
</ChipsDirective>
</ChipListComponent>
<ButtonComponent onClick={this.onClick.bind(this)}>Show</ButtonComponent>
</div>
);
}
}
render(<Default />, document.getElementById('sample'));Returns SelectedItem | SelectedItems | undefined
Allows removing the chip item(s) by passing a single or array of string, number, or ChipModel values.
| Parameter | Type | Description |
|---|---|---|
| fields | number | number[] | HTMLElement | HTMLElement[] |
We can pass number or array of number or chip element or array of chip element. |
import { render } from 'react-dom';
import { ButtonComponent } from "@syncfusion/ej2-react-buttons";
import { ChipDirective, ChipListComponent, ChipsDirective } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import { SampleBase } from './sample-base';
export class Default extends SampleBase {
onClick(args) {
this.chip.remove([0]);
}
render() {
return (
<div>
<ChipListComponent id="chip-avatar" ref={t => (this.chip = t)}>
<ChipsDirective>
<ChipDirective text="Small"></ChipDirective>
<ChipDirective text="Medium"></ChipDirective>
<ChipDirective text="Large"></ChipDirective>
<ChipDirective text="Extra Large"></ChipDirective>
</ChipsDirective>
</ChipListComponent>
<ButtonComponent onClick={this.onClick.bind(this)}>Remove</ButtonComponent>
</div>
);
}
}
render(<Default />, document.getElementById('sample'));
```<br> |
Returns *void*
### select
Allows selecting the chip item(s) by passing a single or array of string, number, or ChipModel values.
Returns *void*
## Events
<h3 class="doc-prop-wrapper" id="beforeclick" data-Path="beforeclick-beforeClick">
<a href="#beforeclick" aria-hidden="true" class="anchor">
<svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16">
<path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4
3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8
4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64
1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z">
</path>
</svg>
</a><span class='doc-prop-name'>beforeClick</span>
<span class="doc-prop-type"> [`EmitType<ClickEventArgs>`](./clickEventArgs)
</span>
</h3>
Triggers before the click event of the chip is fired.
This event can be used to prevent the further process and restrict the click action over a chip.
```tsx
import { render } from 'react-dom';
import * as ReactDom from 'react-dom';
import { ChipListComponent, ChipsDirective, ChipDirective } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import { SampleBase } from './sample-base';
export class Default extends SampleBase {
chipClick(e) {
alert('you have selected ' +e.text);
}
render() {
return (
<ChipListComponent id="chip-avatar" selection="Single" beforeClick={this.chipClick.bind(this)}>
<ChipsDirective>
<ChipDirective text="Andrew"></ChipDirective>
<ChipDirective text="Janet"></ChipDirective>
<ChipDirective text="Laura"></ChipDirective>
<ChipDirective text="Margaret"></ChipDirective>
</ChipsDirective>
</ChipListComponent>
);
}
}
render(<Default />, document.getElementById('sample'));Triggers when a chip is clicked.
import { render } from 'react-dom';
import * as ReactDom from 'react-dom';
import { ChipListComponent, ChipsDirective, ChipDirective } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import { SampleBase } from './sample-base';
export class Default extends SampleBase {
chipClick(e) {
alert('you have clicked ' + e.target.textContent);
}
render() {
return (
<ChipListComponent id="chip-avatar" onClick={this.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>
);
}
}
render(<Default />, document.getElementById('sample')); EmitType<Event>
Triggers when the component is created successfully.
import { render } from 'react-dom';
import { ChipListComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import { SampleBase } from './sample-base';
export class Default extends SampleBase {
createEvent(e) {
alert('Component Rendered Successfully');
}
render() {
return (
<ChipListComponent id="chip-default" text="Janet Leverling" onCreated={this.createEvent(this)}>
</ChipListComponent>
);
}
}
render(<Default />, document.getElementById('sample'));Fires before removing the chip element.
import { render } from 'react-dom';
import * as ReactDom from 'react-dom';
import { ChipListComponent, ChipsDirective, ChipDirective } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import { SampleBase } from './sample-base';
export class Default extends SampleBase {
deleteEvent(e) {
alert('you have deleted ' + e.text);
}
render() {
return (
<ChipListComponent id="chip-avatar" enableDelete="true" delete={this.deleteEvent.bind(this)}>
<ChipsDirective>
<ChipDirective text="Andrew"/>
<ChipDirective text="Janet"/>
<ChipDirective text="Laura"/>
<ChipDirective text="Margaret"/>
</ChipsDirective>
</ChipListComponent>
);
}
}
render(<Default />, document.getElementById('sample')); EmitType<ChipDeletedEventArgs>
Triggers when the chip item is removed.