TagInput

Input that splits typed text into removable tag pills. Enter / comma to commit (custom separators supported), Backspace on empty input peels the last tag, optional validator rejects bad entries.

designmotiontokens

Press Enter or comma to commit · Backspace on empty input to peel the last tag · Up to 6 tags allowed in this demo.

Usage

import { TagInput } from '@bwo-ui/react';

const [tags, setTags] = useState<string[]>([]);

<TagInput
  value={tags}
  onValueChange={setTags}
  placeholder="Add a tag…"
  max={10}
  validate={(t) => t.length >= 2 || 'Tag too short'}
/>

Props

Prop	Type	Default	Description
`value`	`string[]`	—	Controlled tag list.
`defaultValue`	`string[]`	`[]`	Uncontrolled default.
`onValueChange`	`(tags: string[]) => void`	—	Fires whenever the list changes.
`placeholder`	`string`	`'Add a tag…'`	Input placeholder.
`separators`	`string[]`	`['Enter', ',']`	Keys that finalise a tag.
`max`	`number`	—	Maximum number of tags.
`validate`	`(tag: string) => string \| true`	—	Custom validator. Return string to reject with that reason.
`renderTag`	`(tag, remove) => ReactNode`	—	Override the pill render.