---
title: Chip
description: A compact element for input, selection or filtering.
---
import Source from './_generated/chip.mdx';

A compact chip. iOS renders a tinted rounded pill (secondary container); Android adds a ripple on the interactive surface. Three simplified variants cover the MD3 chip set: a static `default` assist label, a `selectable` filter chip and a `dismissible` input chip.

<DemoFrame component="chip" />

## Installation

```bash
npx touchcn add chip
```

## Usage

<CodeGroup>

```html Angular
<tcn-chip>Design</tcn-chip>

<tcn-chip variant="selectable" [(selected)]="on">Available</tcn-chip>

<tcn-chip variant="dismissible" (remove)="remove()">Coffee</tcn-chip>
```

```tsx React
import { TcnChip } from '@/components/ui/chip';

<TcnChip>Design</TcnChip>

<TcnChip variant="selectable" selected={on} onSelectedChange={setOn}>
  Available
</TcnChip>

<TcnChip variant="dismissible" onRemove={remove}>
  Coffee
</TcnChip>
```

```vue Vue
<script setup lang="ts">
import { TcnChip } from '@/components/ui/chip';
</script>

<template>
  <TcnChip>Design</TcnChip>

  <TcnChip variant="selectable" v-model:selected="on">Available</TcnChip>

  <TcnChip variant="dismissible" @remove="remove">Coffee</TcnChip>
</template>
```

</CodeGroup>

The `selectable` chip reveals a leading checkmark when on; the `dismissible` chip fires its removal callback from the trailing × button.

## Props

| Prop               | Type                                          | Default     | Description                              |
| ------------------ | --------------------------------------------- | ----------- | ---------------------------------------- |
| `variant`          | `'default' \| 'selectable' \| 'dismissible'`  | `'default'` | Chip behaviour.                          |
| `selected`         | `boolean`                                     | `false`     | Selected state (`selectable`).           |
| `onSelectedChange` | `(selected: boolean) => void`                 | —           | Toggle callback (React).                 |
| `onRemove` / `remove` | `() => void`                               | —           | Fires on dismiss (`dismissible`).        |
| `disabled`         | `boolean`                                     | `false`     | Disable interaction.                     |

<Source />