# Tag input · MIAN

Type to add tags as removable chips. Enter or comma adds, Backspace removes, pasted lists are split.

- Id: `tag-input` · Category: Forms · Needs mian.js: yes · License: MIAN License (free to use)
- Docs: https://mian.ro/components/tag-input
- Use for: tags input, add keywords, multi value input, email recipients.

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-tag-input`: Wrapper around chips and one input. Add mn-input to style it as a field.
- `data-name="tags"`: Adds hidden inputs named tags[] for form submission.
- `data-max="5"`: Maximum number of tags.

## Accessibility

- Give the input a label (visible, or aria-label). Each chip’s remove button is labelled “Remove …”.
- Additions and removals are announced in a polite live region.
- Emits mn:change with { values }.

## Examples

### Tags

```html
<div class="mn-field" style="max-width:26rem">
  <label class="mn-label" for="tags-1">Topics</label>
  <div class="mn-input mn-tag-input" data-name="topics">
    <span class="mn-chip" data-value="Design">Design<button class="mn-chip-remove" type="button" 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" data-value="Accessibility">Accessibility<button class="mn-chip-remove" type="button" aria-label="Remove Accessibility"><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>
    <input id="tags-1" placeholder="Add a topic…">
  </div>
  <p class="mn-hint">Press Enter or comma to add.</p>
</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/tag-input/source