@fluixi-ui/tags-input

Headless tags / chips input for Fluixi UI.

Type and press Enter (or a delimiter such as comma) to add a tag, Backspace on the empty field to remove the last one, and click a chip's × to remove it. Works controlled or uncontrolled, integrates with @fluixi-ui/field, splits pasted text on delimiters, and can submit through a native form via name.

import { TagsInput } from '@fluixi-ui/tags-input';

// Uncontrolled
<TagsInput defaultValue={['react']} placeholder="Add a tag…" onChange={setTags} />

// Controlled, deduped, max 5, lowercased
<TagsInput value={tags()} onChange={setTags} max={5} validate={(t) => t.toLowerCase()} />

Props

| Prop | Type | Description | | --- | --- | --- | | value | string[] | Controlled list of tags. | | defaultValue | string[] | Initial tags when uncontrolled. | | onChange | (value: string[]) => void | Fired when a tag is added or removed. | | placeholder | string | Placeholder for the editable input. | | disabled | boolean | Disable the whole control. | | max | number | Cap the number of tags. | | allowDuplicates | boolean | Allow repeat tags (default false). | | delimiters | string[] | Keys besides Enter that commit a tag (default [',']). | | validate | (value: string) => string \| null | Transform / reject a tag before adding. | | addOnBlur | boolean | Commit the draft on blur (default true). | | name | string | Emit a hidden <input name> per tag for form submit. |

Styling

Styled by data-* in @fluixi-ui/tokens: [data-tags-input] (frame), [data-tags-input-field] (input), [data-tags-input-tag] (chip), [data-tags-input-tag-remove] (× button). Reflects data-disabled / data-invalid.