Docs
Tags Input
Tags Input
Tags input renders an input followed by tags.
akashaipfsethereumweb3
Installation
pnpm dlx shadcn@latest add "https://akasha-ui.pages.dev/r/styles/default/tags-input.json"
Usage
import {
TagsInput,
TagsInputItem,
TagsInputList,
} from "<path-to-ui-components>/tags-input";<TagsInput
onTagsChange={(tags) => setInterests([...tags])}
placeholder="Interests"
className="w-100"
>
<TagsInputList>
{interests.map((interest) => (
<TagsInputItem key={interest} tag={interest} />
))}
</TagsInputList>
</TagsInput>Props
| Name | Type | Description |
|---|---|---|
| separators | 'Enter' or 'Space' or 'Comma' | List of separators. |
| onTagsChange | (tags: Set<string>) => void | Handler function invoked when a tags change. |
TagsInputItem
Props
| Name | Type | Description |
|---|---|---|
| tag | string | Tag value. |
Examples
Autocomplete
Next.jsRemixAstroNest.js