Bileşenler

Combobox

Yazarak daraltılan listeden bir ya da birden çok seçim; sunucu sonuçları ve yeni seçenek ekleme destekli.

Storybook: Storybook
Kaynak kod: Kaynak kod

Aşağıdaki örnek Storybook’tan canlı yüklenir; denetimleri Storybook’ta açabilirsiniz. Yazmaya başlayın; liste açılır ve yazdıkça daralır.

Canlı örnek, StorybookStorybook'ta aç

Varsayılan

Combobox bir metin girişi ve süzülen bir listeden oluşur. Ok düğmesi listeyi açar, seçim varken çarpı düğmesi onu temizler.

Şehir

Yazdıkça liste daralır.

import { Combobox } from '@bigbang/ui';

const cities = ['Adana', 'Ankara', 'Antalya', 'Bursa', 'İstanbul', 'İzmir', 'Konya'].map((city) => ({
  value: city.toLocaleLowerCase('tr'),
  label: city,
}));

export default function Default() {
  return (
    <Combobox label="Şehir" items={cities} placeholder="Şehir arayın" description="Yazdıkça liste daralır." className="max-w-80" />
  );
}

Çoklu seçim

multiple ile seçimler alanda çip olarak durur. Çipin çarpısı ya da boş girişte Backspace seçimi kaldırır.

Şehirler

Ankara

İzmir

import { Combobox } from '@bigbang/ui';

const cities = ['Adana', 'Ankara', 'Antalya', 'Bursa', 'İstanbul', 'İzmir', 'Konya'].map((city) => ({
  value: city.toLocaleLowerCase('tr'),
  label: city,
}));

export default function Multiple() {
  return (
    <Combobox multiple label="Şehirler" items={cities} defaultValue={['ankara', 'izmir']} className="max-w-96" />
  );
}

Yeni seçenek ekleme

onCreate verildiğinde listede olmayan metin için “… ekle” satırı çıkar. Yeni öğeyi döndürün ve items’a ekleyin.

Etiketler

Listede olmayan bir etiketi yazıp ekleyebilirsiniz.

import { Combobox, type ComboboxItem } from '@bigbang/ui';
import { useState } from 'react';

export default function Creatable() {
  const [tags, setTags] = useState<ComboboxItem[]>([
    { value: 'design', label: 'Tasarım' },
    { value: 'research', label: 'Araştırma' },
    { value: 'writing', label: 'Yazı' },
  ]);
  return (
    <Combobox
      multiple
      label="Etiketler"
      description="Listede olmayan bir etiketi yazıp ekleyebilirsiniz."
      items={tags}
      onCreate={(label) => {
        const item = { value: label.toLocaleLowerCase(), label };
        setTags((current) => [...current, item]);
        return item;
      }}
      className="max-w-96"
    />
  );
}

Sunucu sonuçları

Sunucu süzüyorsa filter={false} verin, onInputValueChange ile sorguyu alın ve yüklenirken loading verin.

Sunucudan arama

import { Combobox, type ComboboxItem } from '@bigbang/ui';
import { useEffect, useState } from 'react';

const cities = ['Adana', 'Ankara', 'Antalya', 'Bursa', 'İstanbul', 'İzmir', 'Konya'].map((city) => ({
  value: city.toLocaleLowerCase('tr'),
  label: city,
}));

export default function Async() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState<{ query: string; items: ComboboxItem[] } | null>(null);
  useEffect(() => {
    // Stands in for a server request.
    const timer = setTimeout(() => {
      setResults({ query, items: cities.filter((city) => city.label.toLocaleLowerCase('tr').includes(query.toLocaleLowerCase('tr'))) });
    }, 600);
    return () => clearTimeout(timer);
  }, [query]);
  return (
    <Combobox
      label="Sunucudan arama"
      items={results?.items ?? []}
      filter={false}
      loading={results?.query !== query}
      onInputValueChange={setQuery}
      placeholder="Şehir arayın"
      className="max-w-80"
    />
  );
}

Hata

error alanı geçersiz yapar ve iletiyi girişle birlikte okutur.

Şehir

Bir şehir seçin.

import { Combobox } from '@bigbang/ui';

const cities = ['Adana', 'Ankara', 'Antalya', 'Bursa', 'İstanbul', 'İzmir', 'Konya'].map((city) => ({
  value: city.toLocaleLowerCase('tr'),
  label: city,
}));

export default function Invalid() {
  return (
    <Combobox label="Şehir" items={cities} required error="Bir şehir seçin." className="max-w-80" />
  );
}

Gruplu seçenekler

items bir grup dizisi de olabilir: her grup label ve items taşır. Liste her grubu başlığıyla gösterir; arama sonucunda eşleşmesi kalmayan grup gizlenir.

Canlı örnek, StorybookStorybook'ta aç

Açık ve koyu mod

Renkler semantik token’lardan gelir; iki modda ayrı ayar gerekmez.

Şehir

Yazdıkça liste daralır.

Şehir

Yazdıkça liste daralır.

import { Combobox } from '@bigbang/ui';

const cities = ['Adana', 'Ankara', 'Antalya', 'Bursa', 'İstanbul', 'İzmir', 'Konya'].map((city) => ({
  value: city.toLocaleLowerCase('tr'),
  label: city,
}));

export default function Default() {
  return (
    <Combobox label="Şehir" items={cities} placeholder="Şehir arayın" description="Yazdıkça liste daralır." className="max-w-80" />
  );
}