# Chip · MIAN

Removable tags and toggleable filter chips.

- Id: `chip` · Category: Data display · Needs mian.js: yes · License: MIAN License (free to use)
- Docs: https://mian.ro/components/chip
- Use for: filter chips, removable tags, selected filters, toggle filters.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<script src="https://mian.ro/dist/mian.js" defer></script>
```

## Classes

- `mn-chip`: Base chip.
- `mn-chip-remove`: Remove button: mian.js removes the chip and emits a cancelable mn:remove.
- `button.mn-chip[aria-pressed]`: A filter chip that toggles.

## Accessibility

- Each remove button needs a label naming what it removes. Focus moves to the neighbouring chip after removal.

## Examples

### Removable

```html
<div class="mn-row">
  <span class="mn-chip">Design<button class="mn-chip-remove" aria-label="Remove Design"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg></button></span>
  <span class="mn-chip">Engineering<button class="mn-chip-remove" aria-label="Remove Engineering"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg></button></span>
  <span class="mn-chip mn-primary">Research<button class="mn-chip-remove" aria-label="Remove Research"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg></button></span>
</div>
```

### Filters

```html
<div class="mn-row" role="group" aria-label="Filters">
  <button class="mn-chip" aria-pressed="true">All</button>
  <button class="mn-chip" aria-pressed="false">Open</button>
  <button class="mn-chip" aria-pressed="false">Closed</button>
  <button class="mn-chip" aria-pressed="false">Mine</button>
</div>
```

## Source

Already inside mian.css and mian.js; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/chip/source