bloxa

Tag Input

FREE

Yazıp Enter'a basarak etiket ekleme; ayraçlar, yapıştırma, doğrulama, öneriler ve en fazla sayı.

Canlı düzenle

Ayarları değiştir; bileşen ve kodu anında güncellensin.

react
1/5
Ayarlar
Kod
import { TagInput } from "@/components/ui/tag-input";

<TagInput
  placeholder="Add a topic"
  maxTags={5}
  suggestions={["react", "nextjs", "tailwind"]}
/>

Kurulum

Terminal
npx @bloxa/cli add tag-input
# or: npx shadcn@latest add @bloxa/tag-input

Örnekler

Önerili

Enter veya virgül ekler; boşken Backspace son etiketi siler.

reactnextjs
2/6

Doğrulama

Geçersiz e-postalar reddedilir. Virgüllü bir listeyi yapıştırmayı dene.

API

Her bileşen, oluşturduğu HTML elemanının özelliklerini de kabul eder.

TagInput

ÖzellikTipVarsayılanAçıklama
value / defaultValuestring[]—Etiketler.
onValueChange(tags: string[]) => void—Etiketler değişince çağrılır.
delimitersstring[][","]Etiketi tamamlayan karakterler (Enter her zaman).
maxTagsnumber—En fazla etiket sayısı.
validate(tag) => string | void—Hata mesajı dönerse etiket reddedilir.
suggestionsstring[]—Yazarken gösterilen öneriler.
allowDuplicatesbooleanfalseAynı etiketin tekrarına izin verir.