# Tag Input

> Tag input design, multi-select inputs, chip inputs, and token inputs.

- Skill: `dragoon0x/tag-input` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dragoon0x/tag-input`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dragoon0x/tag-input/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: dragoon0x (https://skillmd.com/u/dragoon0x)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dragoon0x/tag-input

---


# Tag & Token Input

## Behavior
- Type text → press Enter or comma → creates a tag/chip
- Tags appear as removable chips inside the input
- Backspace removes the last tag when input is empty
- Autocomplete suggestions appear while typing
- Click X on any tag to remove it

## Design
- Tags flow and wrap within the input container
- Input grows vertically to accommodate tags
- Tag style: rounded pill or rounded rectangle with X button
- Consistent tag color (or color-coded by category)
- Maximum tag count if applicable

## Autocomplete
- Show matching existing tags/options while typing
- Highlight matching characters
- Allow creating new tags ("Create 'new-tag'" option at bottom)
- Recently used tags shown when input is focused but empty

## Validation
- Prevent duplicate tags (highlight existing one briefly)
- Character/length limits per tag
- Invalid tag format feedback
- Max tags limit with message