Select

Kurulum

Paket

@bigbang/ui

İçe aktarma

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

Kaynak

Select.tsx

Storybook

Select · Playground

Select, @bigbang/ui paketindedir. Seçenek tipi SelectItem olarak dışa açılır.

import { Select, type SelectItem } from '@bigbang/ui';

const items: SelectItem[] = [
  { value: 'one', label: 'Birinci seçenek' },
  { value: 'two', label: 'İkinci seçenek' },
];

<Select label="Alan etiketi" items={items} placeholder="Seçin" value={value} onValueChange={setValue} />;

Özellikler

labelZorunlu

Açıklama

Tetikleyiciye bağlanan görünür etiket. Yer tutucu etiketin yerini tutmaz.

Tür

string

itemsZorunlu

Açıklama

Listelenme sırasıyla seçenekler: value, label, isteğe bağlı icon ve disabled. Listeyi kısa tutun (yaklaşık 15); daha uzun liste arama ister.

Tür

readonly (SelectItem | SelectItemGroup)[]

placeholder

Açıklama

Henüz seçim yokken tetikleyicideki metin, örneğin "Seçin" ya da "Choose".

Tür

string

description

Açıklama

Alanın altındaki yardım metni; aria-describedby ile hatadan önce bağlanır.

Tür

ReactNode

error

Açıklama

Verildiğinde alan geçersiz olur ve mesaj tetikleyiciyle okunur.

Tür

string

invalid

Açıklama

Alanı mesaj olmadan geçersiz işaretler; örneğin mesaj bir hata özetindeyse.

Tür

boolean

Varsayılan

false

required

Açıklama

Seçim zorunludur: etikete * ve görünmeyen "zorunlu" ya da "required" eklenir.

Tür

boolean

Varsayılan

false

necessityIndicator

Açıklama

Formun hangi alanları işaretlediği: required zorunlu alanları, optional diğerlerini "(isteğe bağlı)" ya da "(optional)" ile işaretler.

Tür

'required' | 'optional'

Varsayılan

'required'

size

Açıklama

Tetikleyici yüksekliği: TextInput gibi 32, 36 ya da 40 px.

Tür

'sm' | 'md' | 'lg'

Varsayılan

'md'

fullWidth

Açıklama

Tetikleyiciyi alanın genişliğine yayar. Verilmezse tetikleyici değerine göre genişler.

Tür

boolean

Varsayılan

false

readOnly

Açıklama

Değer gösterilir ve gönderilir ama liste açılmaz.

Tür

boolean

Varsayılan

false

disabled

Açıklama

Alanı ve etiketini devre dışı bırakır; değer gönderilmez.

Tür

boolean

Varsayılan

false

name

Açıklama

Form gönderiminde kullanılan alan adı.

Tür

string

value

Açıklama

Kontrollü seçili değer; seçim yoksa null. onValueChange ile birlikte verin.

Tür

string | null

defaultValue

Açıklama

Kontrolsüz kullanımda ilk çizimdeki seçili değer.

Tür

string | null

onValueChange

Açıklama

Kullanıcı bir seçenek seçince yeni değerle çağrılır.

Tür

(value: string | null) => void

multiple

Açıklama

Birden fazla seçeneğin seçilmesine izin verir. Değer values ve onValuesChange ile yönetilir; liste seçimden sonra açık kalır.

Tür

boolean

Varsayılan

false

values

Açıklama

Çoklu seçimde seçili değerler (kontrollü).

Tür

readonly string[]

defaultValues

Açıklama

Çoklu seçimde başlangıçta seçili değerler (kontrolsüz).

Tür

readonly string[]

onValuesChange

Açıklama

Çoklu seçimde seçim değiştiğinde yeni değer dizisiyle çağrılır.

Tür

(values: string[]) => void

className

Açıklama

Kök öğeye eklenir; yalnızca yerleşim için kullanın.

Tür

string

material

Açıklama

'solid', cam bir Provider altında listeyi opak tutar. Alanın kendisi her zaman opaktır.

Tür

'auto' | 'solid'

Varsayılan

'auto'

Veri öznitelikleri

• data-component="select": kök öğe üzerinde.
• data-part: label, trigger, popup, item, group, group-label, separator, scroll-up, scroll-down, description, error.
• data-popup-open (tetikleyici), data-highlighted ve data-selected (seçenek): Base UI’dan gelir.