Enter or Tab commits
The simplest mode. Type a value, hit Enter or Tab, get a chip. Backspace on empty input deletes the last chip.
Tag Input
Type, paste, suggest — every shape of multi-value input. Enter and Tab commit, Backspace deletes the previous chip, paste explodes CSV into tags.
Paste explodes into tags
Try pasting alpha, beta, gamma. Comma and newline split the clipboard into multiple chips.
Typeahead popover
As you type, matching items from a fixed catalogue appear. Up/Down navigate, Enter commits.
Chips with × remover
Default. The remove button is keyboard-reachable; pressing × on the chip itself or hitting Backspace from the empty input deletes it.
Max-5 with counter
The counter ticks red at the limit. The input refuses commits past max.
Duplicates rejected · pattern enforced
Tags must match /^[a-z0-9-]+$/ and be unique. Failed commits flash red and show a message.
Usage
Wrap an <input class="lsd-tags__input"> in <div class="lsd-tags" data-tags>. Optional attributes:
data-max="N"· max chip countdata-pattern="regex"· validate each tag against a RegExpdata-dedupe="true"· reject duplicatesdata-suggest="csv,of,options"· enables the typeaheaddata-initial="csv"· seed chips on load
Emits lsd:tags:change with { tags: string[] }.