uix-uiTag input
Field that collects tags. 3 states.
israt@shapla.example
Press Enter after each email.
import { TagInput } from "@/components/ui/tag-input";
export default function Example() {
return (
<div style={{ width: 360, maxWidth: "100%" }}>
<TagInput label="Invite the team" defaultValue={["israt@shapla.example"]} helper="Press Enter after each email." />
</div>
);
}
Installation
$ npx uix-ui@latest add tag-inputThis copies the file into components/ui/tag-input.tsx in your project. npx shadcn@latest add @uix/tag-input works too.
Usage
import { TagInput } from "@/components/ui/tag-input";
<div style={{ width: 360, maxWidth: "100%" }}>
<TagInput label="Invite the team" defaultValue={["israt@shapla.example"]} helper="Press Enter after each email." />
</div>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | React.ReactNode | – | |
secondaryLabel | React.ReactNode | – | Right-aligned note next to the label, for example "Optional". |
feedback | React.ReactNode | – | Message under the field. |
helper | React.ReactNode | – | Same as feedback. |
error | string | – | Error message; also marks the field invalid and replaces the feedback. |
value | string[] | – | The tags (controlled). |
defaultValue | string[] | – | |
onValueChange | (tags: string[]) => void | – | |
maxTags | number | – | Stops accepting tags at this count. |
Everything else is passed to the root element, so className, aria-* and event handlers work as usual.
Dependencies
Installed for you by the CLI.
class-variance-authorityclsxtailwind-merge
lib/utils.tscomponents/ui/icons.tsx