Interactive
Tags input
Chips over a plain text input that keeps a comma separated value. Enter or comma adds, Backspace removes the last tag, a pasted list is split, duplicates flash, and there are suggestions and a maximum. Needs monsoon.js.
Needs monsoon.js. The styles work on their own, and the behavior comes from the optional interactive layer: add <script src="https://cdn.jsdelivr.net/npm/monsooncss/dist/monsoon.js" defer></script> or import 'monsooncss/js'. See the interactive layer.
Example
JavaScript API
Attribute
data-m-tags-input
Options
| Option | Description |
|---|---|
data-m-tags-input-max="5" | |
data-m-tags-input-suggestions="css,html,js" | |
data-m-tags-input-separator="," | |
data-m-tags-input-add-on-blur="false" |
Methods
| Method | Description |
|---|---|
Monsoon.tagsInput(el).tags | |
Monsoon.tagsInput(el).add("css") | |
Monsoon.tagsInput(el).remove("css") | |
Monsoon.tagsInput(el).clear() |
Events
| Event | Description |
|---|---|
monsoon:change { tags } | |
monsoon:tag-add { tag } (cancelable) | |
monsoon:tag-remove { tag } |
Classes
5 classes. Click a name to copy it. Utilities on the same element always win over component defaults, so any of them can be adjusted with plain utility classes.
| Class | Type | What it does |
|---|---|---|
| Base | Base class of the tags input. On a <div> in the example. Sets block display, width, flex display, alignment, gap and height, and --tone.CSS |
|
| Modifier | Modifier, combined with the tags-input class. Not used in the example above. Sets contents display.CSS |
|
| Modifier | Modifier, combined with the tags-input class. Not used in the example above. Sets inline-flex display, alignment, gap, width, height and padding.CSS |
|
| Modifier | Modifier, combined with the tags-input class. Not used in the example above. Sets grid display, alignment, width, height, text color and corner radius.CSS |
|
| Modifier | Modifier, combined with the tags-input class. Not used in the example above. Sets alignment, width, height, padding, text size and text color.CSS |
Usage
The styles ship inside the same stylesheet as the utilities, and the behavior comes from the optional monsoon.js script, which enhances any element with a matching data-m attribute, including markup added later.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">
<script src="https://cdn.jsdelivr.net/npm/monsooncss/dist/monsoon.js" defer></script>
<!-- Tags input: start from the base class, then add modifiers -->
<div class="field max-w-md">
<label class="label" for="ti-topics">Topics</label>
<div class="tags-input" data-m-tags-input data-m-tags-input-max="6" data-m-tags-input-suggestions="accessibility,animation,css,dark mode,design tokens,forms,javascript,performance,typography">
<input id="ti-topics" class="input" name="topics" value="css, design tokens" placeholder="Add a topic">
</div>
<p class="hint">Up to 6 topics. Paste a comma separated list to add many.</p>
</div>Theme it with --seed on any ancestor, for example style="--seed: #0d9488", and force a scheme with class="dark" or class="light" on a wrapper.
Accessibility
- Give every control a visible
labellinked withfor, or anaria-labelwhen the purpose is obvious from context. Link help and error text witharia-describedby; invalid styles use:user-invalid, so they appear only after the user interacts. - Every interactive part shows a visible focus ring with
:focus-visible, and tone colors pair with-foregroundtokens that keep text at 4.5:1 or better in light and dark mode.