TagEditor Experimental

Tag input with comma-separated entry, duplicate detection, validation, max limit, and typeahead suggestions (static or async). Tags display as removable chips.

import { TagEditor } from 'phoundry-ui';

Basic

Show code

<TagEditor
  tags={tags}
  onchange={(t) => tags = t}
/>

With Suggestions

Show code

<TagEditor
  tags={tags}
  onchange={(t) => tags = t}
  suggestions={['svelte', 'react', 'vue', 'angular', 'solid']}
/>

With Max Tags (4)

2 / 4 tags

Show code

<TagEditor
  tags={tags}
  onchange={(t) => tags = t}
  maxTags={4}
/>

Validation

Return true, false, or a string error message from validate.

No tags

Show code

<TagEditor
  tags={tags}
  onchange={(t) => tags = t}
  validate={(tag) => tag.length >= 3 || 'Min 3 characters'}
/>

Async suggestions

The lookup is debounced (~200ms). Errors fall back to an empty suggestion list.

No tags

Show code

<TagEditor
  tags={tags}
  onchange={(t) => tags = t}
  suggestions={async (q) => await fetchTags(q)}
/>

Disabled

Show code

<TagEditor tags={tags} onchange={set} disabled />

Props

Prop	Type	Default	Description
tags required	string[]	—	Current tags.
placeholder	string	'Add tags (comma-separated)…'	Input placeholder text.
onchange required	(tags: string[]) => void	—	Called when tags change.
onChange	(tags: string[]) => void \| Promise<void>	—	Deprecated — use `onchange` instead.
disabled	boolean	false	Disable input and remove buttons.
maxTags	number	—	Maximum number of tags allowed.
validate	(tag: string) => boolean \| string	—	Custom validation — return true, false, or an error message string.
suggestions	string[] \| ((query: string) => Promise<string[]>)	—	Static array or async function for typeahead suggestions.
class	string	—	Additional CSS classes.

Usage tips

Type a tag and press Enter or click Add. Use commas to add multiple tags at once.
Backspace on an empty input removes the last tag.
Duplicates are rejected automatically with an inline validation message.
Pass an async function to suggestions for server-side typeahead (debounced at 200ms).