Search results

Accessibility in JavaScript Chips control

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.ts
index.html
styles.css
import { ChipList } from '@syncfusion/ej2-buttons';

// Initialize and Render Chip control

 new ChipList({chips: [{
            "text": "Anne",
            "leadingIconCss": "andrew"
        },
        {
            "text": "Janet",
            "leadingIconCss": "janet"
        },
        {
            "text": "Laura",
            "leadingIconCss": "laura"
        },
        {
            "text": "Margaret",
            "leadingIconCss": "margaret"
        }
    ],
 enableDelete: true }, '#chip');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Chip</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="styles.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='loader'>LOADING....</div>
    <div id='container'>
        <div id="chip"></div>
    </div>
</body>

</html>
#container {
  visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}
#chip .andrew {
  background-image: url('https://ej2.syncfusion.com/demos/src/chips/images/andrew.png')
  }
  
  #chip .margaret {
  background-image: url('https://ej2.syncfusion.com/demos/src/chips/images/margaret.png')
  }
  
  #chip .laura {
  background-image: url('https://ej2.syncfusion.com/demos/src/chips/images/laura.png')
  }
  
  #chip .janet {
  background-image: url('https://ej2.syncfusion.com/demos/src/chips/images/janet.png')
  }