UNPKG

26 kBMarkdownView Raw
1<!--docs:
2title: "Chips (deprecated)"
3layout: detail
4section: components
5excerpt: "Chips are compact elements that represent an attribute, text, entity, or action."
6iconId: chip
7path: /catalog/chips/deprecated/
8-->
9
10# Chips (deprecated)
11
12Chips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action.
13
14## Design & API Documentation
15
16<ul class="icon-list">
17 <li class="icon-list-item icon-list-item--spec">
18 <a href="https://material.io/go/design-chips">Material Design guidelines: Chips</a>
19 </li>
20 <li class="icon-list-item icon-list-item--link">
21 <a href="https://material-components.github.io/material-components-web-catalog/#/component/chips">Demo</a>
22 </li>
23</ul>
24
25## Installation
26
27```
28npm install @material/chips
29```
30
31## Basic Usage
32
33### HTML Structure
34
35>**Note**: Due to IE11 and Edge's lack of support for the `:focus-within` selector, keyboard navigation of the chip set will not be visually obvious.
36
37```html
38<div class="mdc-chip-set" role="grid">
39 <div class="mdc-chip" role="row">
40 <div class="mdc-chip__ripple"></div>
41 <span role="gridcell">
42 <span role="button" tabindex="0" class="mdc-chip__primary-action">
43 <span class="mdc-chip__text">Chip One</span>
44 </span>
45 </span>
46 </div>
47 <div class="mdc-chip" role="row">
48 <div class="mdc-chip__ripple"></div>
49 <span role="gridcell">
50 <span role="button" tabindex="-1" class="mdc-chip__primary-action">
51 <span class="mdc-chip__text">Chip Two</span>
52 </span>
53 </span>
54 </div>
55 ...
56</div>
57```
58
59### Styles
60
61```scss
62@use "@material/chips/deprecated/mdc-chips";
63```
64
65### JavaScript Instantiation
66
67```js
68import {MDCChipSet} from '@material/chips/deprecated';
69const chipSetEl = document.querySelector('.mdc-chip-set');
70const chipSet = new MDCChipSet(chipSetEl);
71```
72
73> See [Importing the JS component](../../../docs/importing-js.md) for more information on how to import JavaScript.
74
75## Variants
76
77### Leading and Trailing Icons
78
79You can optionally add a leading icon (i.e. thumbnail) and/or a trailing "remove" icon to a chip. To add an icon, add an `i` element with your preferred icon, give it a class of `mdc-chip__icon`, and a class of either `mdc-chip__icon--leading` or `mdc-chip__icon--trailing`.
80
81We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts:
82
83```html
84<head>
85 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
86</head>
87```
88
89However, you can also use SVG, [Font Awesome](https://fontawesome.com/), or any other icon library you wish.
90
91#### Leading icon
92
93```html
94<div class="mdc-chip" role="row">
95 <div class="mdc-chip__ripple"></div>
96 <i class="material-icons mdc-chip__icon mdc-chip__icon--leading">event</i>
97 <span role="gridcell">
98 <span role="button" tabindex="0" class="mdc-chip__primary-action">
99 <span class="mdc-chip__text">Add to calendar</span>
100 </span>
101 </span>
102</div>
103```
104
105#### Trailing icon
106
107A trailing icon comes with the functionality to remove the chip from the set. If you're adding a trailing icon, also set `tabindex="0"` and `role="button"` to make it accessible by keyboard and screenreader. Trailing icons should only be added to [input chips](#input-chips).
108
109```html
110<div class="mdc-chip" role="row">
111 <div class="mdc-chip__ripple"></div>
112 <span role="gridcell">
113 <span role="button" tabindex="0" class="mdc-chip__primary-action">
114 <span class="mdc-chip__text">Jane Smith</span>
115 </span>
116 </span>
117 <span role="gridcell">
118 <i class="material-icons mdc-chip__icon mdc-chip__icon--trailing" tabindex="-1" role="button">cancel</i>
119 </span>
120</div>
121```
122
123### Choice Chips
124
125Choice chips are a variant of chips which allow single selection from a set of options. To define a set of chips as choice chips, add the class `mdc-chip-set--choice` to the chip set element.
126
127```html
128<div class="mdc-chip-set mdc-chip-set--choice" role="grid">
129 ...
130</div>
131```
132
133### Filter Chips
134
135Filter chips are a variant of chips which allow multiple selection from a set of options. To define a set of chips as filter chips, add the class `mdc-chip-set--filter` to the chip set element. When a filter chip is selected, a checkmark appears as the leading icon. If the chip already has a leading icon, the checkmark replaces it. This requires the HTML structure of a filter chip to differ from other chips:
136
137```html
138<div class="mdc-chip-set mdc-chip-set--filter" role="grid">
139 <div class="mdc-chip" role="row">
140 <div class="mdc-chip__ripple"></div>
141 <span class="mdc-chip__checkmark" >
142 <svg class="mdc-chip__checkmark-svg" viewBox="-2 -3 30 30">
143 <path class="mdc-chip__checkmark-path" fill="none" stroke="black"
144 d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
145 </svg>
146 </span>
147 <span role="gridcell">
148 <span role="checkbox" tabindex="0" aria-checked="false" class="mdc-chip__primary-action">
149 <span class="mdc-chip__text">Filterable content</span>
150 </span>
151 </span>
152 </div>
153 ...
154</div>
155```
156
157To use a leading icon in a filter chip, put the `mdc-chip__icon--leading` element _before_ the `mdc-chip__checkmark` element:
158
159```html
160<div class="mdc-chip-set mdc-chip-set--filter" role="grid">
161 <div class="mdc-chip" role="row">
162 <div class="mdc-chip__ripple"></div>
163 <i class="material-icons mdc-chip__icon mdc-chip__icon--leading">face</i>
164 <span class="mdc-chip__checkmark" >
165 <svg class="mdc-chip__checkmark-svg" viewBox="-2 -3 30 30">
166 <path class="mdc-chip__checkmark-path" fill="none" stroke="black"
167 d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
168 </svg>
169 </span>
170 <span role="gridcell">
171 <span role="checkbox" tabindex="0" aria-checked="false" class="mdc-chip__primary-action">
172 <span class="mdc-chip__text">Filterable content</span>
173 </span>
174 </span>
175 </div>
176 ...
177</div>
178```
179
180### Input Chips
181
182Input chips are a variant of chips which enable user input by converting text into chips. To define a set of chips as input chips, add the class `mdc-chip-set--input` to the chip set element.
183
184```html
185<div class="mdc-chip-set mdc-chip-set--input" role="grid">
186 ...
187</div>
188```
189
190#### Adding Chips to the DOM
191
192The MDC Chips package does not handle the process of converting text into chips, in order to remain framework-agnostic. The `MDCChipSet` component exposes an `addChip` method, which accepts an element which is expected to already be inserted within the Chip Set element after any existing chips. The `MDCChipSet` component will then handle creating and tracking a `MDCChip` component instance.
193
194For example:
195
196```js
197input.addEventListener('keydown', function(event) {
198 if (event.key === 'Enter' || event.keyCode === 13) {
199 const chipEl = document.createElement('div');
200 // ... perform operations to properly populate/decorate chip element ...
201 chipSetEl.appendChild(chipEl);
202 chipSet.addChip(chipEl);
203 }
204});
205```
206
207> _NOTE_: `MDCChipSet` will generate a unique ID to apply to each added chip's element if it does not already have an ID
208> when it is passed to `addChip`. This is used to distinguish chips during user interactions.
209
210#### Removing Chips from the DOM
211
212By default, input chips are removed in response to clicking the trailing remove icon in the chip. Removal can also be triggered by calling `MDCChip`'s `beginExit()` method.
213
214Individual `MDCChip` instances will emit a `MDCChip:removal` event once the exit transition ends. `MDCChipSet` will handle destroying the `MDCChip` instance in response to `MDCChip:removal`, but it must be removed from the DOM manually. You can listen for `MDCChip:removal` from the parent Chip Set or any ancestor, since the event bubbles:
215
216```js
217chipSet.listen('MDCChip:removal', function(event) {
218 chipSetEl.removeChild(event.detail.root);
219});
220```
221
222### Pre-selected
223
224To display a pre-selected filter or choice chip, add the class `mdc-chip--selected` to the root chip element.
225
226```html
227<div class="mdc-chip-set mdc-chip-set--choice" role="grid">
228 <div class="mdc-chip mdc-chip--selected" role="row">
229 <div class="mdc-chip__ripple"></div>
230 <span role="gridcell">
231 <span role="radio" tabindex="0" aria-checked="true" class="mdc-chip__primary-action">
232 <span class="mdc-chip__text">Add to calendar</span>
233 </span>
234 </span>
235 </div>
236</div>
237```
238
239To pre-select filter chips that have a leading icon, also add the class `mdc-chip__icon--leading-hidden` to the `mdc-chip__icon--leading` element. This will ensure that the checkmark displaces the leading icon.
240
241```html
242<div class="mdc-chip-set mdc-chip-set--filter" role="grid">
243 <div class="mdc-chip mdc-chip--selected" role="row">
244 <div class="mdc-chip__ripple"></div>
245 <i class="material-icons mdc-chip__icon mdc-chip__icon--leading mdc-chip__icon--leading-hidden">face</i>
246 <span class="mdc-chip__checkmark">
247 <svg class="mdc-chip__checkmark-svg" viewBox="-2 -3 30 30">
248 <path class="mdc-chip__checkmark-path" fill="none" stroke="black"
249 d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
250 </svg>
251 </span>
252 <span role="gridcell">
253 <span role="checkbox" tabindex="0" aria-checked="true" class="mdc-chip__primary-action">
254 <span class="mdc-chip__text">Filterable content</span>
255 </span>
256 </span>
257 </div>
258</div>
259```
260
261## Additional Information
262
263### Accessibility
264
265Material Design spec advises that touch targets should be at least 48 x 48 px.
266To meet this requirement, add the following to your chip:
267
268```html
269<div class="mdc-touch-target-wrapper">
270 <div class="mdc-chip mdc-chip--touch">
271 <div class="mdc-chip__ripple"></div>
272 <span role="gridcell">
273 <span role="button" tabindex="0" class="mdc-chip__primary-action">
274 <div class="mdc-chip__touch"></div>
275 <span class="mdc-chip__text">Chip One</span>
276 </span>
277 </span>
278 </div>
279</div>
280```
281
282Note that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).
283
284## Style Customization
285
286### CSS Classes
287
288CSS Class | Description
289--- | ---
290`mdc-chip-set` | Mandatory. Indicates the set that the chip belongs to.
291`mdc-chip-set--input` | Optional. Indicates that the chips in the set are input chips, which enable user input by converting text into chips.
292`mdc-chip-set--choice` | Optional. Indicates that the chips in the set are choice chips, which allow a single selection from a set of options.
293`mdc-chip-set--filter` | Optional. Indicates that the chips in the set are filter chips, which allow multiple selection from a set of options.
294`mdc-chip` | Mandatory.
295`mdc-chip__ripple` | Mandatory. Indicates the element which shows the ripple styling.
296`mdc-chip--selected` | Optional. Indicates that the chip is selected.
297`mdc-chip__text` | Mandatory. Indicates the text content of the chip.
298`mdc-chip__icon` | Optional. Indicates an icon in the chip. We recommend using [Material Icons](https://material.io/tools/icons/) from Google Fonts.
299`mdc-chip__icon--leading` | Optional. Indicates a leading icon in the chip.
300`mdc-chip__icon--leading-hidden` | Optional. Hides the leading icon in a filter chip when the chip is selected.
301`mdc-chip__icon--trailing` | Optional. Indicates a trailing icon which removes the chip from the DOM. Only use with input chips.
302`mdc-chip__checkmark` | Optional. Indicates the checkmark in a filter chip.
303`mdc-chip__checkmark-svg` | Mandatory with the use of `mdc-chip__checkmark`. Indicates the checkmark SVG element in a filter chip.
304`mdc-chip__checkmark-path` | Mandatory with the use of `mdc-chip__checkmark`. Indicates the checkmark SVG path in a filter chip.
305
306> _NOTE_: Every element that has an `mdc-chip__icon` class must also have either the `mdc-chip__icon--leading` or `mdc-chip__icon--trailing` class.
307
308`mdc-chip__action--primary` | Mandatory. Placed on the `mdc-chip__text` element.
309`mdc-chip__action--trailing` | Optinoal. Placed on the `mdc-chip__icon--trailing` when it should be accessible via keyboard navigation.
310`mdc-chip--deletable` | Optional. Indicates that the chip should be removable by the delete or backspace key.
311
312### Sass Mixins
313
314Mixin | Description
315--- | ---
316`set-spacing($gap-size)` | Customizes the amount of space between each chip in the set
317`shape-radius($radius, $rtl-reflexive)` | Sets the rounded shape to chip with given radius size. Set `$rtl-reflexive` to true to flip radius values in RTL context, defaults to false.
318`fill-color-accessible($color)` | Customizes the background fill color for a chip, and updates the chip's ink, icon and ripple colors to meet accessibility standards
319`fill-color($color)` | Customizes the background fill color for a chip
320`ink-color($color)` | Customizes the text ink color for a chip, and updates the chip's ripple color to match
321`selected-ink-color($color)` | Customizes text ink and ripple color of a chip in the _selected_ state
322`outline($width, $style, $color)` | Customizes the outline properties for a chip
323`outline-width($width, $horizontal-padding)` | Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `horizontal-padding` is also included with a custom value
324`outline-style($style)` | Customizes the outline style for a chip
325`outline-color($color)` | Customizes the outline color for a chip
326`height($height)` | Customizes the height for a chip
327`horizontal-padding($padding)` | Customizes the horizontal padding for a chip
328`leading-icon-color($color, $opacity)` | Customizes the color of a leading icon in a chip, optionally customizes opacity
329`trailing-icon-color($color, $opacity, $hover-opacity, $focus-opacity)` | Customizes the color of a trailing icon in a chip, optionally customizes regular/hover/focus opacities
330`leading-icon-size($size)` | Customizes the size of a leading icon in a chip
331`trailing-icon-size($size)` | Customizes the size of a trailing icon in a chip
332`leading-icon-margin($left-margin, $right-margin)` | Customizes the margin of a leading icon in a chip
333`trailing-icon-margin($left-margin, $right-margin)` | Customizes the margin of a trailing icon in a chip
334`elevation-transition()` | Adds a MDC elevation transition to the chip. This should be used instead of setting transition with `mdc-elevation-transition-value()` directly when a box shadow transition is desired for a chip
335`density($density-scale)` | Sets density scale for chip. Supported density scales are `-2`, `-1` and `0` (default).
336
337> _NOTE_: `mdc-chip-set-spacing` also sets the amount of space between a chip and the edge of the set it's contained in.
338
339## `MDCChip` and `MDCChipSet` Properties and Methods
340
341The MDC Chips package is composed of two JavaScript classes:
342* `MDCChip` defines the behavior of a single chip.
343* `MDCChipSet` defines the behavior of chips within a specific set. For example, chips in an input chip set behave differently from those in a filter chip set.
344
345To use the `MDCChip` and `MDCChipSet` classes, [import](../../../docs/importing-js.md) both classes from `@material/chips`.
346
347### `MDCChip`
348
349Method Signature | Description
350--- | ---
351`beginExit() => void` | Proxies to the foundation's `beginExit` method
352`focusPrimaryAction() => void` | Proxies to the foundation's `focusPrimaryAction` method
353`focusTrailingAction() => void` | Proxies to the foundation's `focusTrailingAction` method
354`removeFocus() => void` | Proxies to the foundation's `removeFocus` method
355`setSelectedFromChipSet(selected: boolean) => void` | Proxies to the foundation's `setSelectedFromChipset` method (only called from the chip set)
356
357Property | Value Type | Description
358--- | --- | ---
359`id` | `string` (read-only) | Unique identifier on the chip\*
360`selected` | `boolean` | Proxies to the foundation's `isSelected`/`setSelected` methods
361`shouldRemoveOnTrailingIconClick` | `boolean` | Proxies to the foundation's `getShouldRemoveOnTrailingIconClick`/`setShouldRemoveOnTrailingIconClick` methods\*\*
362`ripple` | `MDCRipple` (read-only) | The `MDCRipple` instance for the root element that `MDCChip` initializes
363
364> \*_NOTE_: This will be the same as the `id` attribute on the root element. If an `id` is not provided, a unique one will be generated by `MDCChipSet.addChip()`.
365
366> \*\*_NOTE_: If `shouldRemoveOnTrailingIconClick` is set to false, you must manually call `beginExit()` on the chip to remove it.
367
368#### Events
369
370Event Name | `event.detail` | Description
371--- | --- | ---
372`MDCChip:interaction` | `{chipId: string}` | Indicates the chip was interacted with (via click/tap or Enter key)
373`MDCChip:selection` | `{chipId: string, selected: boolean}` | Indicates the chip's selection state has changed (for choice/filter chips)
374`MDCChip:removal` | `{chipId: string, removedAnnouncement: string|null}` | Indicates the chip is ready to be removed from the DOM
375`MDCChip:trailingIconInteraction` | `{chipId: string}` | Indicates the chip's trailing icon was interacted with (via click/tap or Enter key)
376`MDCChip:navigation` | `{chipId: string, key: string, source: FocusSource}` | Indicates a navigation event has occurred on a chip
377
378> _NOTE_: All of `MDCChip`'s emitted events bubble up through the DOM.
379
380### `MDCChipSet`
381
382Method Signature | Description
383--- | ---
384`addChip(chipEl: Element) => void` | Adds a new `MDCChip` instance to the chip set based on the given `mdc-chip` element
385
386Property | Value Type | Description
387--- | --- | ---
388`chips` | `ReadonlyArray<MDCChip>` | An array of the `MDCChip` objects that represent chips in the set
389`selectedChipIds` | `ReadonlyArray<string>` | An array of the IDs of all selected chips
390
391## Usage within Web Frameworks
392
393If you are using a JavaScript framework, such as React or Angular, you can create Chips for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../../docs/integrating-into-frameworks.md).
394
395### Adapters: `MDCChipAdapter` and `MDCChipSetAdapter`
396
397See [`chip/component.ts`](chip/component.ts) and [`chip-set/component.ts`](chip-set/component.ts) for vanilla DOM implementations of these adapter APIs for reference.
398
399#### `MDCChipAdapter`
400
401Method Signature | Description
402--- | ---
403`addClass(className: string) => void` | Adds a class to the root element
404`removeClass(className: string) => void` | Removes a class from the root element
405`hasClass(className: string) => boolean` | Returns true if the root element contains the given class
406`addClassToLeadingIcon(className: string) => void` | Adds a class to the leading icon element
407`removeClassFromLeadingIcon(className: string) => void` | Removes a class from the leading icon element
408`eventTargetHasClass(target: EventTarget, className: string) => boolean` | Returns true if target has className, false otherwise
409`notifyInteraction() => void` | Notifies the Chip Set that the chip has been interacted with\*
410`notifySelection(selected: boolean, chipSetShouldIgnore: boolean) => void` | Notifies the Chip Set that the chip has been selected or deselected\*\*. When `chipSetShouldIgnore` is `true`, the chip set does not process the event.
411`notifyTrailingIconInteraction() => void` | Notifies the Chip Set that the chip's trailing icon has been interacted with\*
412`notifyRemoval() => void` | Notifies the Chip Set that the chip will be removed\*\*\*
413`getComputedStyleValue(propertyName: string) => string` | Returns the computed property value of the given style property on the root element
414`setStyleProperty(propertyName: string, value: string) => void` | Sets the property value of the given style property on the root element
415`hasLeadingIcon() => boolean` | Returns whether the chip has a leading icon
416`getRootBoundingClientRect() => ClientRect` | Returns the bounding client rect of the root element
417`getCheckmarkBoundingClientRect() => ClientRect \| null` | Returns the bounding client rect of the checkmark element or null if it doesn't exist
418`notifyNavigation(key: string, source: EventSource) => void` | Notifies the Chip Set that a navigation event has occurred
419`setPrimaryActionAttr(attr: string, value: string) => void` | Sets an attribute on the primary action element to the given value
420`focusPrimaryAction() => void` | Gives focus to the primary action element
421`hasTrailingAction() => boolean` | Returns `true` if the chip has a trailing action element
422`setTrailingActionAttr(attr: string, value: string) => void` | Sets an attribute on the trailing action element to the given value, if the element exists
423`focusTrailingAction() => void` | Gives focus to the trailing action element if present
424`getAttribute(attr: string) => string|null` | Returns the string value of the attribute if it exists, otherwise `null`
425
426
427> \*_NOTE_: `notifyInteraction` and `notifyTrailingIconInteraction` must pass along the target chip's ID, and must be observable by the parent `mdc-chip-set` element (e.g. via DOM event bubbling).
428
429> \*\*_NOTE_: `notifySelection` must pass along the target chip's ID and selected state, and must be observable by the parent `mdc-chip-set` element (e.g. via DOM event bubbling).
430
431> \*\*\*_NOTE_: `notifyRemoval` must pass along the target chip's ID and its root element, and must be observable by the parent `mdc-chip-set` element (e.g. via DOM event bubbling).
432
433#### `MDCChipSetAdapter`
434
435Method Signature | Description
436--- | ---
437`hasClass(className: string) => boolean` | Returns whether the chip set element has the given class
438`removeChipAtIndex(index: number) => void` | Removes the chip with the given `index` from the chip set
439`selectChipAtIndex(index: string, selected: boolean, shouldNotifyClients: boolean) => void` | Calls `MDCChip#setSelectedFromChipSet(selected)` on the chip at the given `index`. Will emit a selection event if called with `shouldNotifyClients` set to `true`. The emitted selection event will be ignored by the `MDCChipSetFoundation`.
440`getIndexOfChipById(id: string) => number` | Returns the index of the chip with the matching `id` or -1
441`focusChipPrimaryActionAtIndex(index: number) => void` | Calls `MDCChip#focusPrimaryAction()` on the chip at the given `index`
442`focusChipTrailingActionAtIndex(index: number) => void` | Calls `MDCChip#focusTrailingAction()` on the chip at the given `index`
443`isRTL() => boolean` | Returns `true` if the text direction is RTL
444`getChipListCount() => number` | Returns the number of chips inside the chip set
445`removeFocusFromChipAtIndex(index: number) => void` | Calls `MDCChip#removeFocus()` on the chip at the given `index`
446`announceMessage(message: string) => void` | Announces the message via [an `aria-live` region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)
447
448### Foundations: `MDCChipFoundation` and `MDCChipSetFoundation`
449
450#### `MDCChipFoundation`
451
452Method Signature | Description
453--- | ---
454`isSelected() => boolean` | Returns true if the chip is selected
455`setSelected(selected: boolean) => void` | Sets the chip's selected state
456`setSelectedFromChipSet(selected: boolean, shouldNotifyClients: boolean) => void` | Sets the chip's selected state (called from the chip set) to the `selected` param. Will emit a selection event if called with `shouldNotifyClients` set to `true`. The emitted selection event will be ignored by the `MDCChipSetFoundation`.
457`getShouldRemoveOnTrailingIconClick() => boolean` | Returns whether a trailing icon click should trigger exit/removal of the chip
458`setShouldRemoveOnTrailingIconClick(shouldRemove: boolean) => void` | Sets whether a trailing icon click should trigger exit/removal of the chip
459`getDimensions() => ClientRect` | Returns the dimensions of the chip. This is used for applying ripple to the chip.
460`beginExit() => void` | Begins the exit animation which leads to removal of the chip
461`handleInteraction(evt: Event) => void` | Handles an interaction event on the root element
462`handleTransitionEnd(evt: Event) => void` | Handles a transition end event on the root element
463`handleTrailingIconInteraction(evt: Event) => void` | Handles an interaction event on the trailing icon element
464`handleKeydown(evt: Event) => void` | Handles a keydown event on the root element
465`removeFocus() => void` | Removes focusability from the chip
466
467#### `MDCChipFoundation` Event Handlers
468
469When wrapping the Chip foundation, the following events must be bound to the indicated foundation methods:
470
471Events | Element Selector | Foundation Handler
472--- | --- | ---
473`click`, `keydown` | `.mdc-chip` (root) | `handleInteraction()`
474`click`, `keydown` | `.mdc-chip__icon--trailing` (if present) | `handleTrailingIconInteraction()`
475`transitionend` | `.mdc-chip` (root) | `handleTransitionEnd()`
476`keydown` | `.mdc-chip` (root) | `handleKeydown()`
477
478#### `MDCChipSetFoundation`
479
480Method Signature | Description
481--- | ---
482`getSelectedChipIds() => ReadonlyArray<string>` | Returns an array of the IDs of all selected chips
483`select(chipId: string) => void` | Selects the chip with the given id
484`handleChipInteraction(detail: MDCChipInteractionEventDetail) => void` | Handles a custom `MDCChip:interaction` event on the root element
485`handleChipSelection(detail: MDCChipSelectionEventDetail) => void` | Handles a custom `MDCChip:selection` event on the root element. When `chipSetShouldIgnore` is true, the chip set does not process the event.
486`handleChipRemoval(detail: MDCChipRemovalEventDetail) => void` | Handles a custom `MDCChip:removal` event on the root element
487`handleChipNavigation(detail: MDCChipNavigationEventDetail) => void` | Handles a custom `MDCChip:navigation` event on the root element
488
489#### `MDCChipSetFoundation` Event Handlers
490
491When wrapping the Chip Set foundation, the following events must be bound to the indicated foundation methods:
492
493Events | Element Selector | Foundation Handler
494--- | --- | ---
495`MDCChip:interaction` | `.mdc-chip-set` (root) | `handleChipInteraction`
496`MDCChip:selection` | `.mdc-chip-set` (root) | `handleChipSelection`
497`MDCChip:removal` | `.mdc-chip-set` (root) | `handleChipRemoval`
498`MDCChip:navigation` | `.mdc-chip-set` (root) | `handleChipNavigation`