# @forter/chips

> chips from Forter Components

Latest version **1.3.9** (published 2023-06-30) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @forter/chips
pnpm add @forter/chips
yarn add @forter/chips
bun add @forter/chips
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.9 |
| Published | 2023-06-30 |
| First published | 2020-10-14 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 80.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Forter Developers |
| Maintainers | forter-npm, lirown, oweingart |
| Keywords | web-components, custom-elements, css-components |

## Links

- npm: https://www.npmjs.com/package/@forter/chips
- Repository: https://github.com/forter/web-components
- Homepage: https://github.com/forter/web-components#readme
- Issues: https://github.com/forter/web-components/issues
- npm.io page: https://npm.io/package/@forter/chips

## Dependencies (2)

- [@forter/core](https://npm.io/package/@forter/core.md) ^2.0.5
- [@forter/checkbox](https://npm.io/package/@forter/checkbox.md) ^3.8.0

## Recent versions

- 1.3.9 (latest) — 2023-06-30
- 1.3.8 — 2022-06-20
- 1.3.7 — 2022-03-15
- 1.3.6 — 2022-03-15
- 1.3.5 — 2022-02-10
- 1.3.4 — 2021-11-28
- 1.3.3 — 2021-10-28
- 1.3.2 — 2021-10-27
- 1.3.1 — 2021-06-30
- 1.3.0 — 2021-06-29
- 1.2.0 — 2021-06-09
- 1.1.0 — 2020-10-14

## README

# fc-chips

An element for wrapping collections of chips
<!-- Author: Yuval Krinberg <yuval.krinberg@forter.com> -->
[![](https://badgen.net/badge/@/forter/blue)](https://components.forter.dev/?path=/docs/display-components-chips--default-properties) [![](https://badgen.net/badge/build/pass/green)](https://github.com/forter/web-components/actions?query=workflow%3ACD) [![](https://badgen.net/badge/vulnerabilities/0/green)](https://snyk.io/vuln/npm:%40forter%2Fchips) [![](https://badgen.net/badgesize/gzip/https/unpkg.com/@forter/chips/build/index.js?label=gzip%20normal)](https://bundlephobia.com/result?p=@forter/chips) [![](https://badgen.net/badgesize/gzip/https/unpkg.com/@forter/chips/build/index.legacy.js?label=gzip%20legacy)](https://bundlephobia.com/result?p=@forter/chips) [![](https://badgen.net/badgesize/gzip/https/unpkg.com/@forter/chips/build/index.css?label=gzip%20css)](https://bundlephobia.com/result?p=@forter/chips)

## Usage

```html
<script>
   import '@forter/chips';
</script>

<fc-chips>
     <fc-chip closeable chip-id="approve" intent="success" filter="true">Approved</fc-chip>
     <fc-chip closeable chip-id="pending" intent="primary" filter="true">Pending</fc-chip>
     <fc-chip closeable chip-id="nr" intent="cancel" filter="true">Not Reviewed</fc-chip>
     <fc-chip closeable chip-id="selected" selected="true"><fc-icon icon="edit"></fc-icon>Selected</fc-chip>
</fc-chips>
```

## Properties

| Property     | Attribute    | Type                              | Default | Description                             |
|--------------|--------------|-----------------------------------|---------|-----------------------------------------|
| `menu`       | `menu`       | `boolean`                         |         | whether or not to display the chip menu |
| `searchtext` | `searchtext` | `string`                          | ""      | filter chips in the menu                |
| `type`       | `type`       | `"normal" \| "stacked" \| "more"` |         | what way to display the chips           |
| `values`     | `values`     | `any[]`                           |         | what way to display the chips           |

## Events

| Event    | Description                      |
|----------|----------------------------------|
| `change` | when the chips are added/removed |

## CSS Custom Properties

| Property               | Description                                |
|------------------------|--------------------------------------------|
| `--fc-chips-flex-wrap` | chips container flex-wrap. example: `wrap` |
| `--fc-chips-gap`       | chips gap. example: `5px`                  |

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