TagInput

'use client';

import { TagInput } from '@akhatmirzo/ui';

export default function TagInputBasic() {
  return (
    <div className="w-full max-w-md">
      <TagInput
        defaultValue={['React', 'TypeScript']}
        placeholder="Teg qo'shing"
        aria-label="Teglar"
      />
    </div>
  );
}

ImportCopy Anchor Link

import { TagInput } from '@akhatmirzo/ui';

When to useCopy Anchor Link

• A list of free-form values — tags, keywords, skills, several emails or phone numbers.
• When likely values are known — pass suggestions: a list appears while typing, but users can still add their own value.
• When users must pick only from a list — use Combobox with multiple; it doesn't let users create new values.
• For a single value, use a plain Input.

With FieldCopy Anchor Link

Inside a Field the label points at the inner <input>, and the description and error go into aria-describedby. value + onValueChange is the controlled mode, defaultValue the uncontrolled one.

'use client';

import { Field, TagInput } from '@akhatmirzo/ui';
import { useState } from 'react';

export default function TagInputWithField() {
  const [tags, setTags] = useState(['dizayn', 'frontend']);

  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      <Field label="Kalit so'zlar" description="Enter yoki vergul bilan qo'shing">
        <TagInput value={tags} onValueChange={setTags} placeholder="Kalit so'z" />
      </Field>
      <p className="m-0 text-sm text-text-muted">
        Qiymat: <span className="font-mono text-text">{JSON.stringify(tags)}</span>
      </p>
    </div>
  );
}

Adding and removingCopy Anchor Link

• Enter or , turns the typed text into a tag (change this with delimiters, e.g. ['Enter', ',', 'Tab']). On an empty input Enter submits the form as usual.
• Paste: "a, b, c" → 3 tags. Text is split on single-character delimiters and, when Enter is a delimiter, on new lines.
• Duplicates are rejected — the comparison ignores case (allow them with allowDuplicates).
• transform turns raw text into a tag (default — trim).
• Double-click a tag (or press Enter / F2 while it's focused) to edit it in place: Enter saves, Esc cancels, clearing the text removes the tag.

SuggestionsCopy Anchor Link

With suggestions, matching options show up while typing. Matching uses normalizeUz: Cyrillic and Latin script and apostrophe variants are treated the same — typing «тош» finds «Toshkent». Tags that are already added are hidden. Move with ↓ / ↑, Enter adds; when nothing is highlighted, Enter adds the typed text itself.

maxTags caps the number of tags. Once the limit is reached the input hides and the container gets data-full.

'use client';

import { Field, TagInput } from '@akhatmirzo/ui';

const cities = ['Toshkent', 'Samarqand', 'Buxoro', "Farg'ona", 'Namangan', 'Andijon', 'Xiva'];

export default function TagInputSuggestions() {
  return (
    <div className="w-full max-w-md">
      <Field label="Shaharlar" description="Ko'pi bilan 4 ta. «тош» deb yozib ko'ring">
        <TagInput suggestions={cities} maxTags={4} placeholder="Shahar yozing" />
      </Field>
    </div>
  );
}

ValidationCopy Anchor Link

validate runs for every new tag: true accepts it, false shows the default error (labels.invalid), a string shows that string. A rejected tag isn't added, the text stays in the input, the error appears below it and is announced to screen readers, and the input gets aria-invalid. The error clears on the next change.

'use client';

import { isValidEmail } from '@akhatmirzo/core';
import { Field, TagInput } from '@akhatmirzo/ui';

export default function TagInputValidate() {
  return (
    <div className="w-full max-w-md">
      <Field label="Qabul qiluvchilar" description="Bir nechta emailni vergul bilan qo'ying">
        <TagInput
          validate={(email) => isValidEmail(email) || "Email noto'g'ri"}
          transform={(raw) => raw.trim().toLowerCase()}
          placeholder="Email qo'shing"
        />
      </Field>
    </div>
  );
}

Sizes and statesCopy Anchor Link

size — sm, md (default), lg: the same minimum height as Input (32 / 40 / 48px); the container grows as tags wrap. In disabled and readOnly states the ✕ buttons are hidden.

'use client';

import { TagInput } from '@akhatmirzo/ui';

export default function TagInputSizes() {
  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      <TagInput size="sm" defaultValue={['sm']} aria-label="Kichik" />
      <TagInput defaultValue={['md']} aria-label="O'rtacha" />
      <TagInput size="lg" defaultValue={['lg']} aria-label="Katta" />
      <TagInput disabled defaultValue={["O'chirilgan"]} aria-label="O'chirilgan" />
    </div>
  );
}

FormsCopy Anchor Link

With name, every tag gets a hidden <input> with that name: new FormData(form).getAll('tags') → ['React', 'Vue']. For PHP-style arrays use name="tags[]".

PropsCopy Anchor Link

className goes to the root container; ref and other <input> attributes (placeholder, autoFocus, onBlur ...) go to the inner input.

labelsCopy Anchor Link

Data attributesCopy Anchor Link

KeyboardCopy Anchor Link

AccessibilityCopy Anchor Link

• List. Tags live in a <ul role="list"> — screen readers announce how many there are.
• Announcements. Adding and removing are announced in a hidden aria-live="polite" region ("React qo'shildi", "React olib tashlandi"); customize with labels.added / labels.removed.
• Errors. The validation error is visible text in a live region, linked to the input via aria-invalid and aria-describedby.
• Suggestions. With suggestions the input is a role="combobox" (aria-expanded, aria-controls, aria-activedescendant) and the list is a role="listbox". Focus always stays in the input.
• ✕ buttons have aria-label="React ni olib tashlash" and a hit area of at least 40px.
• Tags are focused with the arrow keys (tabIndex={-1}); the ✕ buttons are also reachable with Tab.