Chips are compact elements that represent an input, attribute, or action.
Chips allow users to enter information, make selections, filter content, or trigger actions.
While included here as a standalone component, the most common use will
be in some form of input, so some of the behavior demonstrated here is
not shown in context.
An example of rendering multiple chips from an array of values.
Deleting a chip removes it from the array. Note that since no
onClick prop is defined, the Chip can be focused, but does not
gain depth while clicked or touched.
Angular
jQuery
Polymer
React
Vue.js
Chip playground
Chip Component
<Chip/>
Accessibility
If the Chip is deletable or clickable then it is a button in tab order. When the Chip is focused (e.g. when tabbing) releasing (keyup event) Backspace or Delete will call the onDelete handler while releasing Escape will blur the Chip.