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>
  );
}

ImportBo'lim havolasini nusxalash

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

Qachon ishlatishBo'lim havolasini nusxalash

• Erkin qiymatlar ro'yxati — teglar, kalit so'zlar, ko'nikmalar, bir nechta email yoki telefon.
• Variantlar oldindan ma'lum bo'lsa — suggestions bering: foydalanuvchi yozishni boshlaganda ro'yxat chiqadi, lekin o'z qiymatini ham qo'sha oladi.
• Faqat ro'yxatdagi variantlardan tanlash kerak bo'lsa — Combobox (multiple) to'g'riroq: u yangi qiymat yaratishga yo'l qo'ymaydi.
• Bitta qiymat uchun oddiy Input ishlating.

Field bilanBo'lim havolasini nusxalash

Field ichida label ichki <input> ga ulanadi, izoh va xato aria-describedby ga tushadi. value + onValueChange — boshqariladigan rejim, defaultValue — boshqarilmaydigan.

'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>
  );
}

Qo'shish va o'chirishBo'lim havolasini nusxalash

• Enter yoki , — yozilgan matn tegga aylanadi (delimiters bilan o'zgartiriladi, masalan ['Enter', ',', 'Tab']). Bo'sh inputda Enter formani odatdagidek yuboradi.
• Paste: "a, b, c" → 3 teg. Bir belgili ajratuvchilar va (Enter bo'lsa) yangi qatorlar bo'yicha bo'linadi.
• Takror teglar qo'shilmaydi — taqqoslash katta-kichik harfga qaramaydi (allowDuplicates bilan ruxsat beriladi).
• transform — matnni tegga aylantirish (standart — trim).
• Teg ustiga ikki marta bosing (yoki fokusda Enter / F2) — joyida tahrirlanadi: Enter saqlaydi, Esc bekor qiladi, matnni o'chirsangiz teg olib tashlanadi.

TakliflarBo'lim havolasini nusxalash

suggestions berilsa, yozish paytida mos variantlar ro'yxati chiqadi. Qidiruv normalizeUz bilan ishlaydi: kirill va lotin, apostrof variantlari farq qilmaydi — «тош» deb yozsangiz «Toshkent» topiladi. Allaqachon qo'shilgan teglar ro'yxatda ko'rinmaydi. ↓ / ↑ bilan tanlang, Enter qo'shadi; hech narsa ajratilmagan bo'lsa Enter yozilgan matnning o'zini qo'shadi.

maxTags — eng ko'p teglar soni. Chegaraga yetganda input yashiriladi va konteynerda data-full paydo bo'ladi.

'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>
  );
}

TekshiruvBo'lim havolasini nusxalash

validate har bir yangi teg uchun chaqiriladi: true — qabul, false — standart xato (labels.invalid), matn — o'sha xato. Rad etilgan teg qo'shilmaydi, matn inputda qoladi, xato input ostida ko'rinadi va ekran o'quvchiga o'qiladi; input aria-invalid bo'ladi. Keyingi o'zgarishda xato yo'qoladi.

'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>
  );
}

O'lchamlar va holatlarBo'lim havolasini nusxalash

size — sm, md (standart), lg: Input bilan bir xil minimal balandlik (32 / 40 / 48px), teglar ko'paysa konteyner o'sadi. disabled va readOnly holatlarida ✕ tugmalari yo'qoladi.

'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>
  );
}

FormaBo'lim havolasini nusxalash

name berilsa, har bir teg uchun shu nomli yashirin <input> yaratiladi: new FormData(form).getAll('tags') → ['React', 'Vue']. PHP uslubidagi massiv kerak bo'lsa — name="tags[]".

PropsBo'lim havolasini nusxalash

className ildiz konteynerga, ref va qolgan <input> atributlari (placeholder, autoFocus, onBlur ...) ichki input'ga tushadi.

labelsBo'lim havolasini nusxalash

Data atributlariBo'lim havolasini nusxalash

KlaviaturaBo'lim havolasini nusxalash

AccessibilityBo'lim havolasini nusxalash

• Ro'yxat. Teglar <ul role="list"> ichida — ekran o'quvchi teglar sonini aytadi.
• E'lonlar. Qo'shish va o'chirish aria-live="polite" ko'rinmas hududda e'lon qilinadi ("React qo'shildi", "React olib tashlandi"); matnlar labels.added / labels.removed.
• Xato. Tekshiruv xatosi ko'rinadigan matn, aria-live hududda; input'ga aria-invalid va aria-describedby orqali ulanadi.
• Takliflar. suggestions bo'lsa input role="combobox" (aria-expanded, aria-controls, aria-activedescendant), ro'yxat — role="listbox". Fokus doim input'da qoladi.
• ✕ tugmalari — aria-label="React ni olib tashlash", bosish maydoni kamida 40px.
• Teglar strelkalar bilan fokuslanadi (tabIndex={-1}); ✕ tugmalariga Tab bilan ham o'tish mumkin.