TagInput
Add, remove and deduplicate tags without losing the keyboard path.
Live — this one is real
interfacemotion
Enter or comma adds a tag. Backspace removes the last tag.Usage
import { useState } from "react";
import { TagInput } from "mizu-ui";
export function Example() {
const [value, setValue] = useState(["interface", "motion"]);
return <TagInput label="Topics" value={value} onValueChange={setValue} />;
}
Source & setup
Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.
Inspect forms/TagInput.tsx
Source is included in the npm package under src/forms/TagInput.tsx.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value / onValueChange | string[] / function | — | Controlled tag list. |
| maxTags | number | 12 | Maximum accepted tags. |
Accessibility
Enter/comma adds, Backspace removes the last tag. Each remove button is named; errors are announced and focus returns to the input.
Motion
CSS transitions explain state changes. Reduced motion removes travel.