Components / Tag Input
Tag Input
Chip-based multi-value input. Type + Enter (or comma) to add tags · Backspace on empty input removes the last tag. Pill chips with subtle border + soft hover · screen-reader live announcements · error/success states.
forms v0.7.0
Playground
Examples
Pre-filled chips
<cg-tag-input label="Skills" placeholder="Type a skill, press Enter…" helper="Hover a chip to see the soft bg shift · click × to remove" style="max-width:480px;"></cg-tag-input>Empty — start typing
<cg-tag-input label="Tags" placeholder="Type and press Enter or comma" helper="Backspace on empty input removes the last tag" style="max-width:480px;"></cg-tag-input>Max 3 (try adding a 4th)
<cg-tag-input label="Top tags" placeholder="Max 3 tags…" max="3" helper="Live region announces the limit" style="max-width:480px;"></cg-tag-input>Error state
<cg-tag-input label="Tags (required)" placeholder="Add a tag…" error helper="At least one tag is required" style="max-width:480px;"></cg-tag-input>Success state
<cg-tag-input label="Tags" placeholder="Add a tag…" success helper="Looks good!" style="max-width:480px;"></cg-tag-input>Sizes (md / lg)
<div style="display:flex;flex-direction:column;gap:16px;max-width:480px;"><cg-tag-input label="Medium (default)" placeholder="Add a tag…" size="md"></cg-tag-input><cg-tag-input label="Large" placeholder="Add a tag…" size="lg"></cg-tag-input></div>Email recipients
<cg-tag-input label="To" placeholder="Enter email addresses…" helper="Press Enter or comma after each email" size="lg" style="max-width:480px;"></cg-tag-input>GitHub-style topics
<cg-tag-input label="Repository topics" placeholder="Add a topic…" max="6" helper="Up to 6 topics" style="max-width:480px;"></cg-tag-input>Disabled
<cg-tag-input label="Locked tags" disabled style="max-width:480px;"></cg-tag-input>Import
import { CgTagInput } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/cg-tag-input';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
value | string[] | [] | Current tags |
label | string | "" | Label text |
placeholder | string | "" | Input placeholder |
helper | string | "" | Helper text below the field |
delimiter | string | "," | Delimiter to split tags |
max | number | 0 | Maximum tags (0 = unlimited) |
allow-duplicates | boolean | false | Allow duplicate tags |
error | boolean | false | Error state |
success | boolean | false | Success state |
disabled | boolean | false | Disabled state |
size | "md" | "lg" | "md" | Field size |
Events
| Event | Detail | Description |
|---|---|---|
cg-tag-add | {value: string[], tag: string} | Tag added |
cg-tag-remove | {value: string[], tag: string} | Tag removed |
cg-tag-change | {value: string[]} | Tags changed |