Delphi Design

A tag input component with add/remove functionality, keyboard support (Enter to add), duplicate detection, and optional validation.

Basic

Default

With Initial Tags

Pre-populated

React
TypeScript
Tailwind

Usage

import { TagsInput } from "@delphi/ui";

export function Example() {
  const [tags, setTags] = useState<string[]>([]);

  return (
    <TagsInput
      initialTags={tags}
      onTagsChange={setTags}
      placeholder="Add a tag..."
    />
  );
}

With Validation

import { TagsInput } from "@delphi/ui";

export function ValidatedExample() {
  return (
    <TagsInput
      onTagsChange={(tags) => console.log(tags)}
      onValidateTag={(tag) => tag.length <= 20}
      errorMessage="Tag must be 20 characters or less"
      placeholder="Add a tag..."
    />
  );
}

API Reference

Prop	Type	Default	Description
`initialTags`	`string[]`	`[]`	Pre-populated tags
`onTagsChange`	`(tags: string[]) => void`	—	Called when tags change
`onValidateTag`	`(tag: string) => boolean`	—	Optional validation function
`errorMessage`	`string`	—	Toast message shown on validation failure
`placeholder`	`string`	`"Enter text"`	Input placeholder text

Use for collecting multiple short text values (tags, emails, keywords)

Provide a meaningful placeholder to guide users

Use validation to enforce tag format constraints

Use for single-value inputs — use a regular Input instead

Allow excessively long tags — validate length