Tag input
Type to add tags as removable chips. Enter or comma adds, Backspace removes, pasted lists are split.
Tags
Design
Accessibility
Press Enter or comma to add.
<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>Installation
Everything ships in one stylesheet and one small script. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
<script src="https://mian.ro/dist/mian.js" defer></script>Prefer to own the files? /r/tag-input.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| 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 }.