React
Demos
Support
Forum
Download
Search results

Accessibility

Keyboard interaction

The following shortcut keys are used to access the Chip control without any interruption.

Keyboard shortcuts Actions
Enter Selects the targeted chip from the ChipList/ChipCollection.
Delete Deletes the targeted chip from the ChipList/ChipCollection.
Source
Preview
app.tsx
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.
class App extends React.Component<{}, {}> {
  render() {
    return (
        <ChipListComponent id="chip-avatar" enableDelete={true}>
            <ChipsDirective>
                <ChipDirective text="Andrew" avatarIconCss="andrew"></ChipDirective>
                <ChipDirective text="Janet" avatarIconCss="janet"></ChipDirective>
                <ChipDirective text="Laura" avatarIconCss="laura"></ChipDirective>
                <ChipDirective text="Margaret" avatarIconCss="margaret"></ChipDirective>
            </ChipsDirective>
        </ChipListComponent>
    );
  }
}
ReactDom.render(<App />,document.getElementById('chip'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Button</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="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.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>
</head>

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

</html>
Previous
Next