# @material/chips > The Material Components for the Web chips component Latest version **14.0.0** (published 2022-04-28) · MIT license · 0 weekly downloads ## Install ```sh npm install @material/chips pnpm add @material/chips yarn add @material/chips bun add @material/chips ``` ## Health **Score 28/100 (F)** — status: abandoned. Positive: has types package; esm support; no vulnerabilities; popular repo. Warnings: low downloads. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 14.0.0 | | Published | 2022-04-28 | | First published | 2018-02-05 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | separate (@types/material__chips) | | Module format | ESM + CommonJS | | Dependencies | 16 | | Unpacked size | 1.5 MB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 17053 | | Maintainers | yefim, abhiomkar, azakus, bicknellr, material-admin, aprigogin, patrickrodee, aomarks, emarquez, allanchen, esgonzalez, asyncliz, candysonya, ssuarez, taylorv | | Keywords | material components, material design, chips | ## Links - npm: https://www.npmjs.com/package/@material/chips - Repository: https://github.com/material-components/material-components-web - Homepage: https://github.com/material-components/material-components-web#readme - Issues: https://github.com/material-components/material-components-web/issues - npm.io page: https://npm.io/package/@material/chips ## Dependencies (16) - [tslib](https://npm.io/package/tslib.md) ^2.1.0 - [@material/dom](https://npm.io/package/@material/dom.md) ^14.0.0 - [@material/rtl](https://npm.io/package/@material/rtl.md) ^14.0.0 - [@material/base](https://npm.io/package/@material/base.md) ^14.0.0 - [@material/shape](https://npm.io/package/@material/shape.md) ^14.0.0 - [@material/theme](https://npm.io/package/@material/theme.md) ^14.0.0 - [@material/ripple](https://npm.io/package/@material/ripple.md) ^14.0.0 - [@material/tokens](https://npm.io/package/@material/tokens.md) ^14.0.0 - [@material/density](https://npm.io/package/@material/density.md) ^14.0.0 - [@material/checkbox](https://npm.io/package/@material/checkbox.md) ^14.0.0 - [@material/animation](https://npm.io/package/@material/animation.md) ^14.0.0 - [@material/elevation](https://npm.io/package/@material/elevation.md) ^14.0.0 - [@material/focus-ring](https://npm.io/package/@material/focus-ring.md) ^14.0.0 - [@material/typography](https://npm.io/package/@material/typography.md) ^14.0.0 - [@material/touch-target](https://npm.io/package/@material/touch-target.md) ^14.0.0 - [@material/feature-targeting](https://npm.io/package/@material/feature-targeting.md) ^14.0.0 ## Recent versions - 14.0.0 (latest) — 2022-04-28 - 15.0.0-canary.423edc3dc.0 (canary) — 2024-06-26 - 12.0.0-nightly.778a0e8a.0 (nightly) — 2021-07-20 - 4.0.0-alpha.0 (next) — 2019-08-07 - 15.0.0-canary.cfec83c74.0 — 2024-05-20 - 15.0.0-canary.2f5b899bc.0 — 2024-05-20 - 15.0.0-canary.f80ac92b0.0 — 2024-05-02 - 15.0.0-canary.4b35cb7d0.0 — 2024-05-02 - 15.0.0-canary.65c10a622.0 — 2024-04-25 - 15.0.0-canary.311f29a60.0 — 2024-04-23 - 15.0.0-canary.5bebc0064.0 — 2024-04-11 - 15.0.0-canary.68edc03c6.0 — 2024-04-08 - 15.0.0-canary.453a6248a.0 — 2024-03-25 - 15.0.0-canary.819498d8c.0 — 2024-03-15 - 15.0.0-canary.c43b3438b.0 — 2024-02-23 - … 1657 more at https://npm.io/package/@material/chips/versions ## README # Chips **Contents** * [Using chip](#using-chips) * [Chips](#chips) * [API](#api) >Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md). ## Using chips Chips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set. ### Installing chips ``` npm install @material/chips ``` ### Styles ```scss @use "@material/chips/styles"; ``` ### JavaScript instantiation **Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix. ```js import {MDCChipSet} from '@material/chips'; const chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set')); ``` ## Chips Chips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail. ### Basic action chip set example ```html ``` ## API See the readme of each subcomponent for more detail. - [Chip set API](./chip-set#api) - [Chip API](./chip#api) - [Action API](./action#api) ### Usage within 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](../../../docs/integrating-into-frameworks.md). --- _Source: https://npm.io/package/@material/chips · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._