Tag input
Turn short text values into removable tags.
npm install https://animui.stracture.net/__local/package.tgzLive · keyboard ready
- Free-form lists of short values like tags, keywords, or emails.
- Fields where people add values by pressing Enter or comma.
- Use multi-select or chip-group when values come from a fixed list.
- Use input for a single value.
Installation
Install animui once, then import any component or block from its typed package entry.
animui · 250 components and blocks
React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.
npm install https://animui.stracture.net/__local/package.tgzLoad the stylesheet once at your app root, then use the typed component import:
import 'animui/styles.css';
import { TagInput } from 'animui/tag-input';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideexample.tsx
import { TagInput } from "animui/tag-input"; export function TopicsField() { const [topics, setTopics] = useState(["design", "motion"]); return ( <TagInput label="Topics" value={topics} onValueChange={setTopics} description="Press Enter or comma to add." /> );}TagInput
A field that turns typed text into removable tags, with keyboard picking and a gliding selection ring.
PropTypeDefaultDescription
labelRequiredstring–Visible label tied to the text input.valuestring[]–Controlled tags.defaultValuestring[][]Initial tags when uncontrolled.onValueChange(value: string[]) => void–Called with the full list after each add or remove.placeholderstring"Add a tag"Shown while there are no tags.descriptionstring–Helper copy under the field.idstring–Input id. Generated when omitted.- Enteror,
- Adds the typed text as a tag. Duplicates (case-insensitive) pulse the existing tag instead.
- Backspace
- At the start of the input, picks the last tag; pressed again, removes the picked tag.
- Delete
- Removes the picked tag.
- ArrowLeftorArrowRight
- Moves the pick between tags and back to the input.
- Escape
- Clears the pick.
- Each tag has a remove button labelled "Remove <tag>".
- Adds, removals, picks, and duplicates are announced in a polite aria-live region.
- Blurring the input commits any typed draft as a tag.
- New tags blur and scale in where the text was typed; removed tags leave and the rest glide on the morph spring. The shell follows wrapped rows on a smooth spring.
- A ring glides between picked tags. Reduced motion removes layout travel, scale, and blur, keeping fades.
- Tags wrap onto new rows and the shell height follows on a spring, so the field never scrolls horizontally.
- The text input keeps an 80px minimum, dropping to its own row when the last row is full.
- Every tag is a motion element with layout position animation; fine for dozens of tags, not hundreds.
- Two ResizeObservers track the content and message heights.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use for free-form values like tags, emails, or keywords. Use multi-select or chip-group when values come from a fixed list.
- Controlled or uncontrolled. Tags are plain strings; validate or normalize in onValueChange.
The full library index for assistants is at /llms.txt.