Inputs

TagInputNew in 0.8.0

Chip input with typeahead suggestions, paste-splitting, validation and keyboard editing.

TagInput

Preview

Allow duplicatesOnly suggestions

Max tags 6

designreact

2 tags.

Usage

tsx

import { TagInput } from "@vesture/react";

<TagInput
  suggestions={["design", "react", "testing"]}
  maxTags={5}
  validate={(t) => (t.length < 2 ? "Too short" : null)}
  onChange={setTags}
/>

Behavior

Enter and comma commit the typed text by default (delimiters). Backspace in an empty field removes the last tag. Pasting a list splits it into tags.
validate returns an error message to reject a tag; the message is announced under the field and passed to onReject.

Props

Prop	Type	Default	Description
value / defaultValue / onChange	string[]	—	Controlled or uncontrolled tags.
suggestions / allowCustom	string[] / boolean	[] / true	Typeahead list; set allowCustom false to restrict to it.
allowDuplicates / maxTags	boolean / number	false	Limits.
delimiters	string[]	["Enter", ","]	Keys that commit text ("Tab", " " also work).
validate / normalize / onReject	function	—	Validation pipeline.
renderTag	(tag, index) => ReactNode	—	Custom tag content.
invalid / disabled / placeholder	boolean / string	—	State.