# @rmwc/chip

> RMWC Chip component

Latest version **14.3.5** (published 2024-10-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install @rmwc/chip
pnpm add @rmwc/chip
yarn add @rmwc/chip
bun add @rmwc/chip
```

## Health

**Score 45/100 (D)** — status: stable.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 14.3.5 |
| Published | 2024-10-24 |
| First published | 2018-09-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 22.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1657 |
| Author | rmwc |
| Maintainers | jamesmfriedman |
| Keywords | rmwc |

## Links

- npm: https://www.npmjs.com/package/@rmwc/chip
- Repository: https://github.com/rmwc/rmwc
- Homepage: https://github.com/rmwc/rmwc/tree/master/packages/chip
- Issues: https://github.com/rmwc/rmwc/issues
- npm.io page: https://npm.io/package/@rmwc/chip

## Dependencies (5)

- [@rmwc/base](https://npm.io/package/@rmwc/base.md) 14.3.5
- [@rmwc/icon](https://npm.io/package/@rmwc/icon.md) 14.3.5
- [@rmwc/types](https://npm.io/package/@rmwc/types.md) 14.3.5
- [@rmwc/ripple](https://npm.io/package/@rmwc/ripple.md) 14.3.5
- [@material/chips](https://npm.io/package/@material/chips.md) ^14.0.0

## Recent versions

- 14.3.5 (latest) — 2024-10-24
- 14.0.2-alpha.7 (next) — 2023-10-30
- 14.3.4 — 2024-09-25
- 14.3.3 — 2024-08-30
- 14.3.2 — 2024-08-19
- 14.3.1 — 2024-07-19
- 14.3.0 — 2024-07-18
- 14.2.9 — 2024-07-03
- 14.2.8 — 2024-07-01
- 14.2.7 — 2024-06-30
- 14.2.6 — 2024-06-28
- 14.2.5 — 2024-06-26
- 14.2.2 — 2024-04-24
- 14.2.1 — 2024-04-17
- 14.2.0 — 2024-04-17
- … 159 more at https://npm.io/package/@rmwc/chip/versions

## README

# Chips

Chips represent complex entities in small blocks, such as a contact.

- Module **@rmwc/chip**
- Import styles:
  - Using CSS Loader
    - import '@rmwc/chip/styles';
  - Or include stylesheets
    - **'@material/chips/dist/mdc.chips.css'**
    - **'@rmwc/icon/icon.css'**
    - **'@material/ripple/dist/mdc.ripple.css'**
- MDC Docs: [https://material.io/develop/web/components/chips/](https://material.io/develop/web/components/chips/)

```jsx
<ChipSet>
  <Chip selected label="Cookies" />
  <Chip label="Pizza" />
  <Chip label="Icecream" />
</ChipSet>
```

```jsx
<ChipSet>
  <Chip icon="favorite" label="Cookies" trailingIcon="close" />
</ChipSet>
```

```jsx
function Example() {
  const [selected, setSelected] = React.useState(false);
  return (
    <ChipSet>
      <Chip
        key="my-chip"
        label="Click Me"
        checkmark
        selected={selected}
        onRemove={(evt) => console.log('onRemove', evt.detail)}
        onInteraction={(evt) => {
          console.log('onInteraction', evt.detail);
          setSelected(!selected);
        }}
        onTrailingIconInteraction={(evt) =>
          console.log('onTrailingIconIteraction', evt.detail)
        }
        trailingIcon="close"
      />
    </ChipSet>
  );
}
```

## Filter and Choice Chipsets

You can specify a `ChipSet` as either a `filter` of `choice` which slightly changes the visual styling of selected chips. While `material-components-web` has some built in functionality for chip sets, it doesn't fit well with React's unidirectional data flow. It is recommended you use standard React patterns to store selected chips in your state and render them accordingly.

Clicking on the trailing close icon will trigger a close animation and put the chip in an exited state, but it is up to you to remove component out from rendering. The you use the `onRemove` prop implement this behavior.

```jsx
function Example() {
  const [selected, setSelected] = React.useState({
    cookies: false,
    pizza: false,
    icecream: false
  });
  const toggleSelected = (key) =>
    setSelected({
      ...selected,
      [key]: !selected[key]
    });

  return (
    <ChipSet filter>
      <Chip
        selected={selected.cookies}
        checkmark
        onInteraction={() => toggleSelected('cookies')}
        label="Cookies"
      />
      <Chip
        selected={selected.pizza}
        checkmark
        onInteraction={() => toggleSelected('pizza')}
        icon="local_pizza"
        label="Pizza"
      />
      <Chip
        selected={selected.icecream}
        checkmark
        onInteraction={() => toggleSelected('icecream')}
        icon="favorite_border"
        label="Icecream"
      />
    </ChipSet>
  );
}
```

```jsx
function Example() {
  const [selected, setSelected] = React.useState({
    cookies: false,
    pizza: false,
    icecream: false
  });
  const toggleSelected = (key) =>
    setSelected({
      ...selected,
      [key]: !selected[key]
    });

  return (
    <ChipSet choice>
      <Chip
        selected={selected.cookies}
        onInteraction={() => toggleSelected('cookies')}
        label="Cookies"
      />
      <Chip
        selected={selected.pizza}
        onInteraction={() => toggleSelected('pizza')}
        icon="local_pizza"
        label="Pizza"
      />
      <Chip
        selected={selected.icecream}
        onInteraction={() => toggleSelected('icecream')}
        icon="favorite_border"
        label="Icecream"
      />
    </ChipSet>
  );
}
```

## Chip
A Chip component.

### Props

| Name | Type | Description |
|------|------|-------------|
| `checkmark` | `boolean` | Includes an optional checkmark for the chips selected state. |
| `children` | `ReactNode` | Additional children will be rendered in the text area. |
| `foundationRef` | `Ref<any>` | Advanced: A reference to the MDCFoundation. |
| `icon` | `IconPropT` | Instance of an Icon Component. |
| `id` | `string` | An optional chip ID that will be included in callback evt.detail. If this is not passed, RMWC will attempt to use the "key" prop if present. |
| `label` | `ReactNode` | Text for your Chip. |
| `onInteraction` | `(evt: ChipOnInteractionEventT) => void` | A callback for click or enter key. This should be used over onClick for accessibility reasons. evt.detail = { chipId: string } |
| `onRemove` | `(evt: ChipOnRemoveEventT) => void` | A callback that is fired once the chip is in an exited state from removing it. evt.detail = { chipId: string } |
| `onTrailingIconInteraction` | `(evt: ChipOnTrailingIconInteractionEventT) => void` | A callback for click or enter key for the trailing icon. material-components-web always treats this as an intent to remove the chip. evt.detail = { chipId: string } |
| `selected` | `boolean` | makes the Chip appear selected. |
| `trailingIcon` | `IconPropT` | Instance of an Icon Component. |
| `trailingIconRemovesChip` | `boolean` | Defaults to true. Set this to false if your trailing icon is something other than a remove button. |


## ChipSet
A container for multiple chips.

### Props

| Name | Type | Description |
|------|------|-------------|
| `choice` | `boolean` | Creates a choice chipset |
| `filter` | `boolean` | Creates a filter chipset |

---
_Source: https://npm.io/package/@rmwc/chip · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._