Tag Input

TabsTextarea

Turns typed entries into removable tags.

  • React
  • TypeScript

Press Enter or comma to add. Up to 6.

Installation

pnpm add krz-ui

Usage

import { TagInput } from "krz-ui";
<TagInput label="Skills" value={skills} onValueChange={setSkills} max={8} />

API Reference

PropTypeDescription
value / defaultValuestring[]Controlled or initial tags.
onValueChange(value: string[]) => voidCalled when tags are added or removed.
separatorsstring[]Keys that add a tag besides Enter. Defaults to [","].
maxnumberMaximum number of tags.
allowDuplicatesbooleanAllow the same tag twice.
validate(tag) => boolean | stringReject (false) or transform (string) a tag.
label / hint / error / placeholderReactNode / stringField text.
className / style / ref—className and style go on the whole field; ref and native input attributes go to the <input>. See Customization.
classNames{ label?, control?, input?, message?, list?, tag?, remove? }Extra classes for inner parts.