TagInput

Code

import { Field, FieldLabel, TagInput } from "@fadymondy/nasaq/web";export function Labels() {  return (    <Field>      <FieldLabel>Labels</FieldLabel>      <TagInput defaultValue={["design", "urgent"]} />    </Field>  );}

Forms · beta

Live examples and controls: TagInput in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/tag-input.json

A text input that turns what you type into removable chips. Use it for free-form lists: labels, keywords, email recipients. It is a Field control, so FieldLabel, FieldDescription and FieldError wire up as they do for Input.

When to useCopy Anchor Link

• The user types their own values and there can be several.
• The values can also come from a suggestion list, but free entry is allowed.

When not to useCopy Anchor Link

• Picking from a fixed list: use Combobox or Select.
• A single filter chosen from a few: use ChipGroup.

ImportCopy Anchor Link

import { TagInput } from "@fadymondy/nasaq/web";

Quick startCopy Anchor Link

import { Field, FieldLabel, TagInput } from "@fadymondy/nasaq/web";

export function Labels() {
  return (
    <Field>
      <FieldLabel>Labels</FieldLabel>
      <TagInput defaultValue={["design", "urgent"]} />
    </Field>
  );
}

AnatomyCopy Anchor Link

TagInput                     data-slot="tag-input"  (data-invalid, data-disabled)
├─ box                       data-slot="tag-input-box"
│  ├─ Badge + remove button  data-slot="tag-input-tag"
│  └─ input                  data-slot="tag-input-field"
├─ ul role=listbox           data-slot="tag-input-suggestions"  (only with suggestions)
└─ p role=alert              data-slot="tag-input-error"

APICopy Anchor Link

Duplicates are ignored, compared with normalizeForSearch (case and Arabic letter variants folded).

ExamplesCopy Anchor Link

Emails with a limit:

import { Field, FieldLabel, TagInput } from "@fadymondy/nasaq/web";
import { useState } from "react";

export function Invite() {
  const [emails, setEmails] = useState<string[]>([]);
  return (
    <Field>
      <FieldLabel>Invite by email</FieldLabel>
      <TagInput
        value={emails}
        onValueChange={setEmails}
        maxTags={3}
        inputProps={{ dir: "ltr" }}
        validate={(tag) => /^\S+@\S+\.\S+$/.test(tag) || `${tag} is not a valid email.`}
      />
    </Field>
  );
}

Arabic with suggestions:

import { Field, FieldLabel, TagInput } from "@fadymondy/nasaq/web";

export function Skills() {
  return (
    <Field>
      <FieldLabel>المهارات</FieldLabel>
      <TagInput suggestions={["إدارة المشاريع", "تصميم", "برمجة"]} />
    </Field>
  );
}

AccessibilityCopy Anchor Link

• With suggestions the input is a role="combobox" with aria-activedescendant.
• Each remove button is named "Remove ". Adding and removing are announced through a polite live region; refusals through role="alert".
• Localise messages you return from validate; built-in ones follow the Nasaq locale.

RTL & i18nCopy Anchor Link

• Chips flow from the inline start. Tag text is wrapped in <bdi> so an English tag inside Arabic keeps its order.
• The Arabic comma is a separator by default.
• Pass inputProps={{ dir: "ltr" }} for emails and URLs.

Styling & tokensCopy Anchor Link

Box uses border-input, bg-card, border-nq-focus; errors use border-nq-danger and text-nq-danger-text. Target [data-invalid] and [data-disabled] on the root. Extend with className; do not override colours with hex.

Do / Don'tCopy Anchor Link

• Do set maxTags when the backend has a limit.
• Do validate on the server too.
• Do not use it for a fixed choice list; use Combobox.

RelatedCopy Anchor Link

• Field
• Badge
• ChipGroup

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-forms-tag-input--docs