Combobox

const frameworks = [
{ value: "next", label: "Next.js" },
{ value: "remix", label: "Remix" },
{ value: "gatsby", label: "Gatsby", disabled: true },
{ value: "nuxt", label: "Nuxt", description: "Vue" },
];

<Field label="Framework">
<Combobox
  options={frameworks}
  placeholder="Framework ara…"
  locale="tr-TR"
  emptyMessage="Sonuç yok"
  loadingMessage="Yükleniyor…"
  toggleLabel="Seçenekleri göster"
  getRemoveLabel={(label) => label + " öğesini kaldır"}
  name="framework"
/>
</Field>

const [value, setValue] = useState<string[]>(["next", "vite"]);

<Field label="Teknoloji yığını" description="İstediğin kadar seç.">
<Combobox multiple options={frameworks} value={value} onValueChange={setValue} placeholder="Ekle…" />
</Field>

const [text, setText] = useState("");
const [options, setOptions] = useState<ComboboxOption[]>([]);
const [loading, setLoading] = useState(false);

useEffect(() => {
if (!text.trim()) return;
setLoading(true);
const timer = setTimeout(async () => {
  setOptions(await searchCities(text));
  setLoading(false);
}, 200);
return () => clearTimeout(timer);
}, [text]);

<Combobox
options={options}
filter={false}
loading={loading}
onInputValueChange={setText}
emptyMessage="Şehir bulunamadı"
/>

<Combobox aria-label="Küçük" size="sm" options={frameworks} />
<Combobox aria-label="Geçersiz" invalid options={frameworks} />
<Combobox aria-label="Devre dışı" disabled options={frameworks} defaultValue="astro" />