react ~8 KB 0 deps v0.1.0 ↗ GitHub ↗

@mshafiqyajid/react-tag-input

Headless tag input hook and styled component. Chip-style tags, autocomplete dropdown, keyboard navigation, validation, max tags.

Playground #

ReactTypeScript
Props
TSX
import { TagInputStyled } from "@mshafiqyajid/react-tag-input/styled";
import "@mshafiqyajid/react-tag-input/styles.css";

<TagInputStyled
  value={tags}
  onChange={setTags}
/>

Install # 

npm install @mshafiqyajid/react-tag-input

Quick start # 

import { TagInputStyled } from "@mshafiqyajid/react-tag-input/styled";
import "@mshafiqyajid/react-tag-input/styles.css";

const [tags, setTags] = useState<string[]>([]);
<TagInputStyled
  value={tags}
  onChange={setTags}
  suggestions={["React", "TypeScript", "Node.js"]}
  maxTags={5}
  label="Technologies"
  tone="primary"
/>

API #

PropTypeDefaultDescription
valuestring[]—Controlled tags array
defaultValuestring[][]Uncontrolled initial tags
onChange(tags) => void—Called when tags change
suggestionsstring[][]Autocomplete suggestions
maxTagsnumber—Maximum number of tags
allowDuplicatesbooleanfalseAllow duplicate tags
delimiterstring | string[]["Enter", ","]Keys that confirm a tag
validate(tag) => boolean—Custom validation function
tagVariant"solid" | "outline" | "soft""solid"Tag chip style
labelstring—Visible label
hintstring—Helper text below input
errorstring—Error message (overrides hint)
size"sm" | "md" | "lg""md"Input size
tone"neutral" | "primary" | "success" | "danger""neutral"Color tone
disabledbooleanfalseDisable interaction
maxLengthnumber—Max chars per tag
caseSensitivebooleanfalseCase-sensitive duplicate detection
onTagAdd(tag) => void—Tag added callback
onTagRemove(tag, index) => void—Tag removed callback
renderTag(tag, i, onRemove) => ReactNode—Custom chip renderer
sortablebooleanfalseDrag-to-reorder tags
Edit this page on GitHub