# 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 Chip one Chip two ``` ## 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).