# @smui/chips

> Svelte Material UI - Chips

Latest version **9.0.3** (published 2026-08-04) · Apache-2.0 license · 0 weekly downloads

## Install

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

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 9.0.3 |
| Published | 2026-08-04 |
| First published | 2019-08-30 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 5 |
| Unpacked size | 825.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3444 |
| Author | Hunter Perrin |
| Maintainers | hperrin |
| Keywords | svelte, svelte3, material-ui, material-design, material, svelte-components, sveltejs |

## Links

- npm: https://www.npmjs.com/package/@smui/chips
- Repository: https://github.com/hperrin/svelte-material-ui
- Homepage: https://github.com/hperrin/svelte-material-ui#readme
- Issues: https://github.com/hperrin/svelte-material-ui/issues
- npm.io page: https://npm.io/package/@smui/chips

## Dependencies (5)

- [safevalues](https://npm.io/package/safevalues.md) ^1.2.0
- [@smui/common](https://npm.io/package/@smui/common.md) ^9.0.2
- [@smui/ripple](https://npm.io/package/@smui/ripple.md) ^9.0.2
- [@smui/checkbox](https://npm.io/package/@smui/checkbox.md) ^9.0.2
- [@smui/touch-target](https://npm.io/package/@smui/touch-target.md) ^9.0.2

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 9.0.3 (latest) — 2026-08-04
- 9.0.0-beta.14 (beta) — 2026-05-16
- 8.0.0-alpha.0 (alpha) — 2024-05-13
- 9.0.2 — 2026-08-03
- 9.0.1 — 2026-06-02
- 9.0.0 — 2026-05-20
- 9.0.0-beta.13 — 2026-05-16
- 9.0.0-beta.12 — 2026-04-21
- 9.0.0-beta.11 — 2026-04-21
- 9.0.0-beta.10 — 2026-04-21
- 9.0.0-beta.9 — 2026-04-21
- 9.0.0-beta.8 — 2026-04-21
- 9.0.0-beta.7 — 2026-04-21
- 9.0.0-beta.6 — 2026-04-21
- 9.0.0-beta.5 — 2026-04-21
- … 101 more at https://npm.io/package/@smui/chips/versions

## README

# Svelte Material UI - Chips

Chips are used to show discrete information, filter options, input tags, or actions.

# Installation

```sh
npm install --save-dev @smui/chips
```

# Examples and Usage Information

https://sveltematerialui.com/demo/chips

# Exports

## (default)

A chip.

### Props / Defaults

- `use`: `[]` - An array of Svelte actions and/or arrays of an action and its options.
- `class`: `''` - A CSS class string.
- `ripple`: `true` - Whether to implement a ripple for when the component is interacted with.
- `touch`: `false` - Increase the touch target.
- `shouldRemoveOnTrailingIconClick`: `true` - Whether the chip should be removed upon clicking the trailing icon.
- `shouldFocusPrimaryActionOnClick`: `true` - Whether the chip should focus the primary action when it is clicked.

### Events

- `MDCChip:interaction`
- `MDCChip:selection`
- `MDCChip:removal`
- `MDCChip:trailingIconInteraction`
- `MDCChip:navigation`

## Set

A set of chips. Chips should only be added onto the end of the set's chip array.

### Props / Defaults

- `use`: `[]` - An array of Svelte actions and/or arrays of an action and its options.
- `class`: `''` - A CSS class string.
- `chips` `[]` - An array containing the chips.
- `key` `chip => chip` - A function used to get the key of the chip. Chip sets that have removable chips should always provide unique keys.
- `selected` `undefined` - The currently selected chip or chips.
- `choice` `false` - Whether to present the chips as a set of choices, allowing one to be chosen.
- `filter` `false` - Whether to present the chips as a set of options, allowing any number to be chosen.
- `input` `false` - Whether to present the chips as a set of values, allowing them to be removed.

## Text

A text label.

todo...

## LeadingIcon

A graphic icon.

todo...

## TrailingIcon

A graphic icon.

todo...

## TrailingAction

A graphic icon.

todo...

# More Information

See [Chips](https://m2.material.io/components/chips) in the Material design spec.

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