# Chip

> A selectable toggle chip for quick filters and choices.

Category: Actions · Status: stable · Package: @bindshq/stance-react@0.1.1 · Docs: https://stanceui.com/components/chip

Use Chip for lightweight on/off choices, such as quick filters above a list. Each chip is a toggle button that reports its state with aria-pressed. For filters with a value to edit, use FilterChip; for removable labels, use Tag.

## Import

```tsx
import { Chip } from '@bindshq/stance-react';
```

Styles are imported once per app: `@bindshq/stance-tokens/css` and `@bindshq/stance-react/styles.css`.

## Examples

### Basic

```tsx
import { Chip } from '@bindshq/stance-react';

export function Basic() {
  return (
    <div role="group" aria-label="Contract status" style={{ display: 'flex', gap: 8 }}>
      <Chip defaultSelected>Signed</Chip>
      <Chip>Awaiting signature</Chip>
      <Chip>Expired</Chip>
    </div>
  );
}
```

### Quick filters

A controlled set of chips filtering a list.

```tsx
import * as React from 'react';
import { Chip } from '@bindshq/stance-react';

export function QuickFilters() {
  const all = ['Sales', 'Legal', 'Support', 'Engineering'];
  const [active, setActive] = React.useState<string[]>(['Sales']);
  return (
    <div style={{ display: 'grid', gap: 12 }}>
      <div
        role="group"
        aria-label="Departments"
        style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}
      >
        {all.map((d) => (
          <Chip
            key={d}
            selected={active.includes(d)}
            onSelectedChange={(on) => setActive((a) => (on ? [...a, d] : a.filter((x) => x !== d)))}
          >
            {d}
          </Chip>
        ))}
      </div>
      <p style={{ margin: 0, fontSize: 14 }}>
        Showing: {active.length ? active.join(', ') : 'all departments'}
      </p>
    </div>
  );
}
```

### Sizes, icons and disabled

```tsx
import { Chip, Icon } from '@bindshq/stance-react';

export function Sizes() {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 8 }}>
      <Chip size="sm" icon={<Icon name="clock" size={12} />}>
        Recent
      </Chip>
      <Chip icon={<Icon name="star" size={14} />}>Favourites</Chip>
      <Chip disabled>Archived</Chip>
    </div>
  );
}
```

## API reference

| Component | Prop | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Chip | `selected` | `boolean` | None | Controlled selected state. |
| Chip | `defaultSelected` | `boolean` | `false` | Initial state when uncontrolled. |
| Chip | `onSelectedChange` | `(selected: boolean) => void` | None | Called when toggled. |
| Chip | `icon` | `ReactNode` | None | Leading icon; replaced by a check mark while selected. |
| Chip | `size` | `'sm' \| 'md'` | `'md'` | Height 26 or 32px. |
| Chip | `...props` | `ButtonHTMLAttributes` | None | Native button attributes. |

## Accessibility

- Renders a native button with aria-pressed, announced as a toggle button.
- Selection is shown by fill, a check mark and aria-pressed, not by colour alone.
- Group related chips with role="group" and an aria-label.

## Keyboard

| Keys | Action |
| --- | --- |
| `Enter` `Space` | Toggles the chip. |

## Guidelines

**Do**

- Use short, parallel labels.
- Label the group, e.g. "Status filters".

**Don’t**

- Use chips for mutually exclusive choices; use RadioGroup or ToggleButton.

## Related

- https://stanceui.com/components/filter-chip
- https://stanceui.com/components/tag
- https://stanceui.com/components/toggle-button