TagInput
Free-text tags with keyboard editing and a limit.
import
import { TagInput } from '@joshicodes/cock';Tags
Try adding a tag twice: the one you already have flashes instead of nothing happening.
design svelte long walks
Keyboard
- Enter or ,
- Adds the tag being typed
- Backspace
- On an empty field, removes the last tag
- Paste
- Splits on commas and newlines
Behaviour
- A rejected tag — duplicate, over the limit or turned down by `validate` — flashes instead of disappearing silently, so Enter never looks broken.
API
Read out of the component sources at build time, so it matches the version you installed.
Every component also takes class, merged
through tailwind-merge so your utility wins.
Props of TagInput
| Prop | Type | Default |
|---|---|---|
value bindable | string[] | [] |
placeholder | string | 'Add a tag…' |
max Stop accepting tags at this many. | number | — |
allowDuplicates | boolean | false |
validate Return false to reject a tag. | (tag: string) => boolean | — |
disabled | boolean | false |
invalid | boolean | false |
id | string | — |
class | string | — |
Events of TagInput
| Event | Type | Default |
|---|---|---|
onchange | (tags: string[]) => void | — |