Tags
InputMITMulti-select tag input with type-to-add, autocomplete suggestions, validation, and max-tags limit.
bun add @otfdashkit/ui
Preview
TagsInput
Loading Storybook preview…
Code
@otfdashkit/uiimport { useState } from 'react'
import { Tags } from '@otfdashkit/ui'
export function Example() {
const [tags, setTags] = useState<string[]>([])
return (
<div className="flex w-[420px] flex-col gap-3">
<Tags value={tags} onValueChange={setTags} placeholder="Type and press Enter…" />
<p className="font-mono text-xs text-muted-foreground">
value: [{tags.map((t) => `"${t}"`).join(', ')}]
</p>
</div>
)
}
Free with the SDK. This component ships in @otfdashkit/ui under the MIT license.
Props
Props declared in the Tags source. Inherited HTML attributes are not listed.
| Prop | Type | Default | Description |
|---|---|---|---|
| allowDuplicates | boolean | false | Allow duplicate tags. Default false. |
| defaultValue | (string | number | readonly string[]) & string[] | Uncontrolled initial value. | |
| disabled | boolean | false | |
| maxTags | number | Cap the total tags. When reached, the input is disabled. | |
| onValueChange | (tags: string[]) => void | Fires whenever the tag list changes. | |
| placeholder | string | 'Add a tag…' | |
| suggestions | string[] | Optional autocomplete pool. | |
| validate | (tag: string) => string | boolean | Return false or an error string to reject a tag. | |
| value | string[] | Controlled value. |