OOratiq

Tag Input

Ready

Dismissible tags with free entry.

strengthhypertrophy

Installation

$ npx @oratiq-js/ui add tag-input

Copies the component and everything it depends on into your project, then lists the npm packages to install. The code is yours after this.

Usage

import
import { TagInput } from "@/components/ui/tag-input";

Behaviour

  • Enter or comma commits the draft as a tag; blur commits too, so nothing typed is silently lost.
  • Backspace on an empty input removes the last tag.
  • Duplicates are ignored; max caps the count.
  • Each tag carries dir="auto" — Arabic tags lay out correctly inside an English form and vice versa.

Props

PropTypeDefaultDescription
value / defaultValuestring[]—The tags (controlled / uncontrolled).
onValueChange(tags: string[]) => void—Fires with the full list.
maxnumber—Maximum number of tags.

View source on GitHub → components/ui/tag-input.tsx