All components
Tags Input
Enter-to-add token input with removable item previews in outline, subtle, and flushed styles.
Variants
outline
subtle
flushed
Sizes
xs
sm
md
lg
Install
zsh — tags-input
1bunx stylexblocks add tags-inputUsage — Ark UI
tags-input.tsx
123456789101112131415161718192021222324252627import { TagsInput } from "#components/ui/ark-ui/tags-input.tsx";
export function Example() { return ( // variant/size resolve once on Root; every part inherits them via // context — ItemDeleteTrigger ships a default close icon <TagsInput.Root defaultValue={["Design", "Engineering"]} variant="outline" size="md"> <TagsInput.Label>Teams</TagsInput.Label> <TagsInput.Control> <TagsInput.Context> {(api) => api.value.map((tag, index) => ( <TagsInput.Item key={index} index={index} value={tag}> <TagsInput.ItemPreview> <TagsInput.ItemText>{tag}</TagsInput.ItemText> <TagsInput.ItemDeleteTrigger /> </TagsInput.ItemPreview> </TagsInput.Item> )) } </TagsInput.Context> <TagsInput.Input placeholder="Add team" /> </TagsInput.Control> <TagsInput.HiddenInput /> </TagsInput.Root> );}