SearchInput

Ne zaman kullanılır

SearchInput listelerde, tablolarda, menülerde ve yardım merkezinde serbest metinle arama içindir.

Ne zaman kullanılmaz

• Sabit bir listeden seçim için: Select kullanın.
• Birden çok ölçütle süzme için: FilterBar kullanın; arama alanı FilterBar’ın içinde yer alabilir.

Anatomi

Ara

AçıkKoyu

Kodu kopyala

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

export default function Default() {
  return <SearchInput label="Ara" placeholder="Ada göre ara" className="max-w-sm" />;
}

1. Etiket: Görünür ya da hideLabel ile gizli; her zaman vardır.
2. Arama ikonu: Süs; yüklenirken dönen halkaya döner.
3. Alan: type="search", mobil klavyede “Ara” tuşu.
4. Temizleme düğmesi: Değer varken sonda belirir.

Davranış

• Escape değeri temizler; alan boşken Escape çevredeki iletişim kutusuna ya da menüye geçer.
• Temizleme düğmesi odağı alana geri verir ve “Arama temizlendi” bir kez duyurulur.
• onSearch yazma durunca debounceMs sonra, temizlenince hemen çalışır. Enter onSubmit çağırır.
• loading alanı kilitlemez; kullanıcı yazmaya devam edebilir.
• Tarayıcının kendi temizleme düğmesi gizlenir; yerine adı olan düğme çizilir.

Yönergeler

• Etiketi gizleseniz bile anlamlı yazın: “Ara” ya da “Kayıtlarda ara”.
• Yer tutucuda neyin aranabileceğini söyleyin: “Ada göre ara”.
• Sayfanın ana araması için landmark verin; bir sayfada tek arama bölgesi olsun.
• Sonuç sayısını alanın yakınında gösterin; bir sonuç yoksa boş durum bileşeni kullanın.

İçerik

• Yer tutucu bir eylemle başlar: “Ada göre ara”.

Türkçe	İngilizce
Aramayı temizle	Clear search
Arama temizlendi	Search cleared
Aranıyor	Searching

İlgili bileşenler

• TextInput: Düz metin alanı.
• FilterBar: Ölçütlerle süzme.
• DataTable: Arama alanını araç çubuğunda taşır.