All components
Tags Input
Enter-to-add token input with removable item previews in outline, subtle, and flushed styles.
Teams
DesignEngineering
Variants
Teams
outlineDesignEngineering
Teams
subtleDesignEngineering
Teams
flushedDesignEngineering
Sizes
Teams
xsDesignEngineering
Teams
smDesignEngineering
Teams
mdDesignEngineering
Teams
lgDesignEngineering
Install
zsh — tags-input
1bunx stylexblocks add tags-inputUsage — Base UI
tags-input.tsx
123456789101112131415161718192021222324252627import { TagsInput } from "#components/ui/base-ui/tags-input.tsx";
export function Example() { return ( // Base UI has no tags-input machine, so Root owns the tag list // (value/defaultValue/onValueChange); Enter adds, the delete trigger // removes, and parts compose through render <TagsInput.Root defaultValue={["Design", "Engineering"]} variant="outline" size="md"> <TagsInput.Label>Teams</TagsInput.Label> <TagsInput.Control> <TagsInput.Context> {(api) => api.value.map((tag) => ( <TagsInput.Item key={tag} value={tag}> <TagsInput.ItemPreview> <TagsInput.ItemText /> <TagsInput.ItemDeleteTrigger /> </TagsInput.ItemPreview> </TagsInput.Item> )) } </TagsInput.Context> <TagsInput.Input placeholder="Add team" aria-label="Add team" /> </TagsInput.Control> </TagsInput.Root> );}