TagInput

Multi-value tag input with create support.

forminputmulti-value

Import

import { TagInput } from "@/components/ui";

Basic Usage

TagInput Preview

Skills

ReactTypeScript

2 / 6 tags

Code

tsx

<TagInput
  value={["react", "typescript"]}
  onChange={setTags}
  placeholder="Add tags..."
/>

With Suggestions

Show autocomplete suggestions

1<TagInput
2  value={tags}
3  onChange={setTags}
4  suggestions={["react", "vue", "angular", "svelte"]}
5  placeholder="Type to search..."
6/>

Max Tags

Limit number of tags

1<TagInput
2  value={tags}
3  onChange={setTags}
4  maxTags={5}
5  placeholder="Max 5 tags..."
6/>

Disable Create

Only allow suggested values

1<TagInput
2  value={tags}
3  onChange={setTags}
4  suggestions={availableTags}
5  allowCreate={false}
6  placeholder="Select from suggestions..."
7/>

Ready to use this component?

Configure your app with the features you need and download production-ready code.

Start Configuring