Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

@material/chips

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@material/chips

The Material Components for the Web chips component

1.0.0
Source
npm

Version published: 6 years ago

Weekly downloads: 594K; decreased by-15.31%

Maintainers: 13

Weekly downloads

Created: 7 years ago

Source

Chips

Chips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action.

Design & API Documentation

Installation

npm install @material/chips

Basic Usage

HTML Structure

<div class="mdc-chip-set">
  <div class="mdc-chip" tabindex="0">
    <div class="mdc-chip__text">Chip content</div>
  </div>
  ...
</div>

Styles

@import "@material/chips/mdc-chips";

JavaScript Instantiation

import {MDCChipSet} from '@material/chips';
const chipSetEl = document.querySelector('.mdc-chip-set');
const chipSet = new MDCChipSet(chipSetEl);

See Importing the JS component for more information on how to import JavaScript.

Variants

Leading and Trailing Icons

You 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.

We recommend using Material Icons from Google Fonts:

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>

However, you can also use SVG, Font Awesome, or any other icon library you wish.

Leading icon

<div class="mdc-chip">
  <i class="material-icons mdc-chip__icon mdc-chip__icon--leading">event</i>
  <div class="mdc-chip__text">Add to calendar</div>
</div>

Trailing icon

A 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.

<div class="mdc-chip">
  <div class="mdc-chip__text">Jane Smith</div>
  <i class="material-icons mdc-chip__icon mdc-chip__icon--trailing" tabindex="0" role="button">cancel</i>
</div>

Choice Chips

Choice 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.

<div class="mdc-chip-set mdc-chip-set--choice">
  ...
</div>

Filter Chips

Filter 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:

<div class="mdc-chip-set mdc-chip-set--filter">
  <div class="mdc-chip">
    <div class="mdc-chip__checkmark" >
      <svg class="mdc-chip__checkmark-svg" viewBox="-2 -3 30 30">
        <path class="mdc-chip__checkmark-path" fill="none" stroke="black"
              d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
      </svg>
    </div>
    <div class="mdc-chip__text">Filterable content</div>
  </div>
  ...
</div>

To use a leading icon in a filter chip, put the mdc-chip__icon--leading element before the mdc-chip__checkmark element:

<div class="mdc-chip-set mdc-chip-set--filter">
  <div class="mdc-chip">
    <i class="material-icons mdc-chip__icon mdc-chip__icon--leading">face</i>
    <div class="mdc-chip__checkmark" >
      <svg class="mdc-chip__checkmark-svg" viewBox="-2 -3 30 30">
        <path class="mdc-chip__checkmark-path" fill="none" stroke="black"
              d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
      </svg>
    </div>
    <div class="mdc-chip__text">Filterable content</div>
  </div>
  ...
</div>

Input Chips

Input 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.

<div class="mdc-chip-set mdc-chip-set--input">
  ...
</div>

Adding Chips to the DOM

The 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.

For example:

input.addEventListener('keydown', function(event) {
  if (event.key === 'Enter' || event.keyCode === 13) {
    const chipEl = document.createElement('div');
    // ... perform operations to properly populate/decorate chip element ...
    chipSetEl.appendChild(chipEl);
    chipSet.addChip(chipEl);
  }
});

NOTE: MDCChipSet will generate a unique ID to apply to each added chip's element if it does not already have an ID when it is passed to addChip. This is used to distinguish chips during user interactions.

Removing Chips from the DOM

By 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.

Individual 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:

chipSet.listen('MDCChip:removal', function(event) {
  chipSetEl.removeChild(event.detail.root);
});

Pre-selected

To display a pre-selected filter or choice chip, add the class mdc-chip--selected to the root chip element.

<div class="mdc-chip mdc-chip--selected">
  <div class="mdc-chip__text">Add to calendar</div>
</div>

To 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.

<div class="mdc-chip mdc-chip--selected">
  <i class="material-icons mdc-chip__icon mdc-chip__icon--leading mdc-chip__icon--leading-hidden">face</i>
  <div class="mdc-chip__checkmark">
    <svg class="mdc-chip__checkmark-svg" viewBox="-2 -3 30 30">
      <path class="mdc-chip__checkmark-path" fill="none" stroke="black"
            d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
    </svg>
  </div>
  <div class="mdc-chip__text">Filterable content</div>
</div>

Style Customization

CSS Classes

CSS Class	Description
`mdc-chip-set`	Mandatory. Indicates the set that the chip belongs to.
`mdc-chip-set--input`	Optional. Indicates that the chips in the set are input chips, which enable user input by converting text into chips.
`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.
`mdc-chip-set--filter`	Optional. Indicates that the chips in the set are filter chips, which allow multiple selection from a set of options.
`mdc-chip`	Mandatory.
`mdc-chip--selected`	Optional. Indicates that the chip is selected.
`mdc-chip__text`	Mandatory. Indicates the text content of the chip.
`mdc-chip__icon`	Optional. Indicates an icon in the chip. We recommend using Material Icons from Google Fonts.
`mdc-chip__icon--leading`	Optional. Indicates a leading icon in the chip.
`mdc-chip__icon--leading-hidden`	Optional. Hides the leading icon in a filter chip when the chip is selected.
`mdc-chip__icon--trailing`	Optional. Indicates a trailing icon which removes the chip from the DOM. Only use with input chips.
`mdc-chip__checkmark`	Optional. Indicates the checkmark in a filter chip.
`mdc-chip__checkmark-svg`	Mandatory with the use of `mdc-chip__checkmark`. Indicates the checkmark SVG element in a filter chip.
`mdc-chip__checkmark-path`	Mandatory with the use of `mdc-chip__checkmark`. Indicates the checkmark SVG path in a filter chip.

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.

Sass Mixins

Mixin	Description
`mdc-chip-set-spacing($gap-size)`	Customizes the amount of space between each chip in the set
`mdc-chip-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.
`mdc-chip-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
`mdc-chip-fill-color($color)`	Customizes the background fill color for a chip
`mdc-chip-ink-color($color)`	Customizes the text ink color for a chip, and updates the chip's ripple color to match
`mdc-chip-selected-ink-color($color)`	Customizes text ink and ripple color of a chip in the selected state
`mdc-chip-outline($width, $style, $color)`	Customizes the outline properties for a chip
`mdc-chip-outline-width($width, $horizontal-padding)`	Customizes the outline width for a chip. `$horizontal-padding` is only required in cases where `mdc-chip-horizontal-padding` is also included with a custom value
`mdc-chip-outline-style($style)`	Customizes the outline style for a chip
`mdc-chip-outline-color($color)`	Customizes the outline color for a chip
`mdc-chip-height($height)`	Customizes the height for a chip
`mdc-chip-horizontal-padding($padding)`	Customizes the horizontal padding for a chip
`mdc-chip-leading-icon-color($color, $opacity)`	Customizes the color of a leading icon in a chip, optionally customizes opacity
`mdc-chip-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
`mdc-chip-leading-icon-size($size)`	Customizes the size of a leading icon in a chip
`mdc-chip-trailing-icon-size($size)`	Customizes the size of a trailing icon in a chip
`mdc-chip-leading-icon-margin($top, $right, $bottom, $left)`	Customizes the margin of a leading icon in a chip
`mdc-chip-trailing-icon-margin($top, $right, $bottom, $left)`	Customizes the margin of a trailing icon in a chip
`mdc-chip-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

NOTE: mdc-chip-set-spacing also sets the amount of space between a chip and the edge of the set it's contained in.

`MDCChip` and `MDCChipSet` Properties and Methods

The MDC Chips package is composed of two JavaScript classes:

MDCChip defines the behavior of a single chip.
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.

To use the MDCChip and MDCChipSet classes, import both classes from @material/chips.

`MDCChip`

Method Signature	Description
`beginExit() => void`	Proxies to the foundation's `beginExit` method

Property	Value Type	Description
`id`	`string` (read-only)	Unique identifier on the chip*
`selected`	`boolean`	Proxies to the foundation's `isSelected`/`setSelected` methods
`shouldRemoveOnTrailingIconClick`	`boolean`	Proxies to the foundation's `getShouldRemoveOnTrailingIconClick`/`setShouldRemoveOnTrailingIconClick` methods**
`ripple`	`MDCRipple` (read-only)	The `MDCRipple` instance for the root element that `MDCChip` initializes

*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().

**NOTE: If shouldRemoveOnTrailingIconClick is set to false, you must manually call beginExit() on the chip to remove it.

Events

Event Name	`event.detail`	Description
`MDCChip:interaction`	`{chipId: string}`	Indicates the chip was interacted with (via click/tap or Enter key)
`MDCChip:selection`	`{chipId: string, selected: boolean}`	Indicates the chip's selection state has changed (for choice/filter chips)
`MDCChip:removal`	`{chipId: string, root: Element}`	Indicates the chip is ready to be removed from the DOM
`MDCChip:trailingIconInteraction`	`{chipId: string}`	Indicates the chip's trailing icon was interacted with (via click/tap or Enter key)

NOTE: All of MDCChip's emitted events bubble up through the DOM.

`MDCChipSet`

Method Signature	Description
`addChip(chipEl: Element) => void`	Adds a new `MDCChip` instance to the chip set based on the given `mdc-chip` element

Property	Value Type	Description
`chips`	`ReadonlyArray<MDCChip>`	An array of the `MDCChip` objects that represent chips in the set
`selectedChipIds`	`ReadonlyArray<string>`	An array of the IDs of all selected chips

Usage within Web Frameworks

If 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.

Adapters: `MDCChipAdapter` and `MDCChipSetAdapter`

See chip/component.ts and chip-set/component.ts for vanilla DOM implementations of these adapter APIs for reference.

`MDCChipAdapter`

Method Signature	Description
`addClass(className: string) => void`	Adds a class to the root element
`removeClass(className: string) => void`	Removes a class from the root element
`hasClass(className: string) => boolean`	Returns true if the root element contains the given class
`addClassToLeadingIcon(className: string) => void`	Adds a class to the leading icon element
`removeClassFromLeadingIcon(className: string) => void`	Removes a class from the leading icon element
`eventTargetHasClass(target: EventTarget, className: string) => boolean`	Returns true if target has className, false otherwise
`notifyInteraction() => void`	Notifies the Chip Set that the chip has been interacted with*
`notifySelection(selected) => void`	Notifies the Chip Set that the chip has been selected or deselected**
`notifyTrailingIconInteraction() => void`	Notifies the Chip Set that the chip's trailing icon has been interacted with*
`notifyRemoval() => void`	Notifies the Chip Set that the chip will be removed***
`getComputedStyleValue(propertyName: string) => string`	Returns the computed property value of the given style property on the root element
`setStyleProperty(propertyName: string, value: string) => void`	Sets the property value of the given style property on the root element
`hasLeadingIcon() => boolean`	Returns whether the chip has a leading icon
`getRootBoundingClientRect() => ClientRect`	Returns the bounding client rect of the root element
`getCheckmarkBoundingClientRect() => ClientRect \| null`	Returns the bounding client rect of the checkmark element or null if it doesn't exist

*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).

**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).

***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).

`MDCChipSetAdapter`

Method Signature	Description
`hasClass(className: string) => boolean`	Returns whether the chip set element has the given class
`removeChip(chipId: string) => void`	Removes the chip with the given id from the chip set
`setSelected(chipId: string, selected: boolean) => void`	Sets the selected state of the chip with the given id

Foundations: `MDCChipFoundation` and `MDCChipSetFoundation`

`MDCChipFoundation`

Method Signature	Description
`isSelected() => boolean`	Returns true if the chip is selected
`setSelected(selected: boolean) => void`	Sets the chip's selected state
`getShouldRemoveOnTrailingIconClick() => boolean`	Returns whether a trailing icon click should trigger exit/removal of the chip
`setShouldRemoveOnTrailingIconClick(shouldRemove: boolean) => void`	Sets whether a trailing icon click should trigger exit/removal of the chip
`getDimensions() => ClientRect`	Returns the dimensions of the chip. This is used for applying ripple to the chip.
`beginExit() => void`	Begins the exit animation which leads to removal of the chip
`handleInteraction(evt: Event) => void`	Handles an interaction event on the root element
`handleTransitionEnd(evt: Event) => void`	Handles a transition end event on the root element
`handleTrailingIconInteraction(evt: Event) => void`	Handles an interaction event on the trailing icon element

`MDCChipFoundation` Event Handlers

When wrapping the Chip foundation, the following events must be bound to the indicated foundation methods:

Events	Element Selector	Foundation Handler
`click`, `keydown`	`.mdc-chip` (root)	`handleInteraction()`
`click`, `keydown`	`.mdc-chip__icon--trailing` (if present)	`handleTrailingIconInteraction()`
`transitionend`	`.mdc-chip` (root)	`handleTransitionEnd()`

`MDCChipSetFoundation`

Method Signature	Description
`getSelectedChipIds() => ReadonlyArray<string>`	Returns an array of the IDs of all selected chips
`select(chipId: string) => void`	Selects the chip with the given id
`handleChipInteraction(chipId: string) => void`	Handles a custom `MDCChip:interaction` event on the root element
`handleChipSelection(chipId: string, selected: boolean) => void`	Handles a custom `MDCChip:selection` event on the root element
`handleChipRemoval(chipId: string) => void`	Handles a custom `MDCChip:removal` event on the root element

`MDCChipSetFoundation` Event Handlers

When wrapping the Chip Set foundation, the following events must be bound to the indicated foundation methods:

Events	Element Selector	Foundation Handler
`MDCChip:interaction`	`.mdc-chip-set` (root)	`handleChipInteraction`
`MDCChip:selection`	`.mdc-chip-set` (root)	`handleChipSelection`
`MDCChip:removal`	`.mdc-chip-set` (root)	`handleChipRemoval`

12.0.0 (2021-07-27)

Bug Fixes

base: observer now listens to superclass properties (88a33cd)
button: allow Mac zoom service to access button label (29ac6ec)
button: Fix non-text buttons with icons to have reduced horizontal padding on the side with the icon. (197f64f)
chips: Add documentation for action (3db4d16)
chips: Add documentation for chip; update action docs (22b83ad)
chips: Add stubbed component methods along with tests (06930c9)
chips: Document chip set; add root readme (5b6a460)
chips: Hide HCM focus indicator for presentational actions (8c7d994)
chips: Update chip set links (4a7939c)
circular-progress: set explicit line-height to prevent inheritance (e8e39ad), closes #7118
dialog: prevent programmatic click on disabled default button (e0c3462)
fab: Fixed Fab ripple (84f3db9), closes #7053
icon-button: prevent icon shift on press in IE11 (8fc2927)
linear-progress: allow parent visibility prop to propagate to bar (e543628)
list: Add core-styles mixin. (fc7c4e5)
list: density configuration mixins do not account for leading avatars (3674c62)
list: Ensure trailing-only variants have leading padding in RTL contexts. (81e2d4f)
list: Fixed the selected + focused state of list item in HCM (8ba3e29)
list: Reset selectedIndex to UNSET_INDEX if #setSingleSelection(true) is called and there are no selected list items. (4eecdea)
list: Selection lists without a selection focus first item. (03f525f)
list: Use more descriptive foundation method comments (08d791f)
mdc-list: invalid syntax in generated .d.ts bundle (ce82846)
menu: correct menu opening delay (a618380), closes #5682 #4411
menu-surface: slightly delay focus restoration to prevent lost focus on mobile devices (9f68a93)
ripple: ensure custom properties are always emitted (caa73ae)
rtl: do not emit if a left/right value or replacement is null (ec4ac52)
rtl: mixins work with pseudo elements (f5b6110)
switch: export temporary deprecated version (bd68539)
switch: misaligned handle when inside some flex containers (ea1e1b8)
switch: move ripple behind handle (3e4c6dc)
switch: overlay colors not showing and support -5 density (33579e0)
switch: prevent collapsing in flex containers (22f390c)
switch: track colors can have opacity and not bleed through (d923db7)
tabscroller: remove trailing underscore (105b15b)
text-field: remove disabled white patch in high contrast mode for Firefox 89+ (17553e9)
prepare for #7183 (#7188) (77b94e8)
text-field: show filled textarea label in Firefox 89+ high contrast (90e08fc)
textfield: announce error message again if user blurs already invalid field (75900a5)
tooltip: Adding missing return statement into MDCTooltipComponent#isShown method. (4d95812)
tooltip: Fixing component definition of MDCTooltipAdatper#deregisterAnchorEventHandler. (d928692)
tooltip: Fixing logic for determining whether or not the user intends a tooltip to be hidden from the screenreader or not. (cf5b9eb)
Remove lint check from test actions (#7185) (1ee1fbf)
touch-target: incorrect position in rtl when width is set (bd1b4e9)

Build System

set AMD module module names within UMD bundles (#7233) (9808de0)

Code Refactoring

checkbox: Deprecated old checkbox theme mixin (22d29cb)
iconbutton: Move ripple target to inner element (33c9a73)

Features

base: add MDCObserverFoundation class (33e6f50)
button: Add focus indicator to link buttons in HCM. (cad4896)
button: add typography & state layer keys to theming API (068fd50)
button: employ elevation token resolvers in theming API (ebb5c73)
button: move icon-size to theming API (85e9a6a)
card: Moving ripple into a mdc-card__ripple element rather than the mdc-card__primary-action. (8ace3b8)
checkbox: Added new theme mixin in checkbox to match token keys (33a9548)
checkbox: Added new theme mixin in checkbox to match token keys (8e60818)
chips: Support presentational actions (8c68530)
dialog: removing call to #close within #destroy. (5631828)
dom: add forced-colors-mode mixin (8416fb9)
elevation: Create elevation resolver mixin (5dfec7a)
elevation: Create resolver function (c18b592)
elevation: Simplify box-shadow custom property support (de48eff)
elevation: Support custom properties in resolver (07a7375)
fab: Added mixin that auto-generates custom properties for Fab (8530d35)
fab: Added mixin to auto-generate custom properties for Fab (14767a8)
fab: Use elevation resolvers (6e9fc4a)
fab: Use elevation resolvers in custom property themes (3f691ec)
iconbutton: Add support for increased touch target to icon button. (f43af56)
list: Add public #getFocusedItemIndex to foundation. Also add a forceUpdate option to #setSelectedIndex that forces a UI update of the selected item. (5d06051)
list: Basic support for three-line lists. (4bb5eea)
menu: Add public #getSelectedIndex to foundation. (f705e80)
radio: Added theme mixin that declares custom properties in MDC radio (b87ebf7)
radio: Added theme styles mixin to MDC radio (464a002)
radio: Added theme styles mixin to Radio (5823407)
ripple: Added theme styles and theme mixin to Ripple (a2b0f4c)
select: Add #getUseDefaultValidation method to foundation. (adeac05)
shape: add shape map theme value support (ec31ae1)
slider: Expose changing certain props after initialization to support MWC (3f36ac7)
switch: add custom property theming support (f147a22)
switch: add density custom property support (598fccc)
switch: add new component and foundation (ef43e6d)
switch: add updated density styles (cb162da)
switch: add updated RTL styles (573dc7f)
switch: update switch to new design spec (0ce2fdb)
switch: update theme keys (00b5899)
switch: Use elevation token resolvers (e1703be)
tabs: Add theming API to tabs (bd25779)
tabs: Added theme-styles() mixin to tabs (e38d744)
test: Add overline support to two- and three-line lists. (38d1846)
test: Add shape radius mixins to list. (d5f1f7c)
theme: add map-ext.split() helper function (ec22e1d)
theme: add state selector mixins (d20dc6d)
theme: gss.annotate supports named arguments (c50d20b)
theme: theme.property() supports custom prop declarations (474836a)
tooltip: Adding foundation methods to allow users to configure the tooltip show and hide delay time. (08db3d7)
tooltip: Adds logic for generating a new tooltip position when all "standard" positions for tooltip w/ caret are invalid. (9bc0eff)
tooltip: Adds logic to determine valid position options for tooltip w/caret, and select which should be used. (2ebfc53)
tooltip: Adjusting transform-origin for tooltips with caret so that the entrance animation originates from the caret. (1a8d064)
Create token package with resolvers (9405502)
tooltip: Adjusting logic and styles so the caret better matches spec. (55ad2d7)
tooltip: Fixes ordering of values provided to tranform-origin. (25751d2)
tooltip: Plain tooltips remain visible if the user hovers over them. (ccce99c)

Reverts

checkbox: Added new theme mixin in checkbox to match token keys (b4c3f51)

BREAKING CHANGES

tooltip: - Tooltips intended to be hidden from the screen reader should be annotated with data-hide-tooltip-from-screenreader="true" (in addition to using data-tooltip-id rather than aria-describedby.

PiperOrigin-RevId: 386490861

Breaking change for the UMD-case where the exports are bound to a global variable. Previously the entry-point would appear in camel-case, but now it's matching the actual package name in dash-case. This is unfortunately not avoidable with the current Webpack tooling. i.e. previous UMD users relying on the globals (which are rather rare anyway), would need to switch from window.mdc.circularProgress to window.mdc['circular-progress].
checkbox: Renamed old checkbox theme mixin for deprecation

PiperOrigin-RevId: 384568221

iconbutton: Icon button now requires an inner ripple element with class mdc-icon-button__ripple. See README for details.

PiperOrigin-RevId: 372153409

Keywords

FAQs

What is @material/chips?

Is @material/chips popular?

Is @material/chips well maintained?

Package last updated on 06 Mar 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@material/chips

Chips

Design & API Documentation

Installation

Basic Usage

HTML Structure

Styles

JavaScript Instantiation

Variants

Leading and Trailing Icons

Leading icon

Trailing icon

Choice Chips

Filter Chips

Input Chips

Adding Chips to the DOM

Removing Chips from the DOM

Pre-selected

Style Customization

CSS Classes

Sass Mixins

MDCChip and MDCChipSet Properties and Methods

MDCChip

Events

MDCChipSet

Usage within Web Frameworks

Adapters: MDCChipAdapter and MDCChipSetAdapter

MDCChipAdapter

MDCChipSetAdapter

Foundations: MDCChipFoundation and MDCChipSetFoundation

MDCChipFoundation

MDCChipFoundation Event Handlers

MDCChipSetFoundation

MDCChipSetFoundation Event Handlers

12.0.0 (2021-07-27)

Bug Fixes

Build System

Code Refactoring

Features

Reverts

BREAKING CHANGES

Keywords

Related posts

PyPI Introduces Digital Attestations to Strengthen Python Package Security

GitHub Removes Malicious Pull Requests Targeting Open Source Repositories

`MDCChip` and `MDCChipSet` Properties and Methods

`MDCChip`

`MDCChipSet`

Adapters: `MDCChipAdapter` and `MDCChipSetAdapter`

`MDCChipAdapter`

`MDCChipSetAdapter`

Foundations: `MDCChipFoundation` and `MDCChipSetFoundation`

`MDCChipFoundation`

`MDCChipFoundation` Event Handlers

`MDCChipSetFoundation`

`MDCChipSetFoundation` Event Handlers