NativeSelect

Kurulum

Paket

@bigbang/ui

İçe aktarma

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

Kaynak

NativeSelect.tsx

Storybook

NativeSelect · Playground

NativeSelect, @bigbang/ui paketindedir. Seçenek tipleri NativeSelectOption ve NativeSelectOptionGroup olarak dışa açılır.

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

<NativeSelect
  label="Ülke"
  name="country"
  placeholder="Seçin"
  options={[
    { value: 'tr', label: 'Türkiye' },
    { value: 'de', label: 'Almanya' },
  ]}
  value={value}
  onValueChange={setValue}
/>;

Özellikler

labelZorunlu

Açıklama

Alanın görünen etiketi; <label> ile select'e bağlanır.

Tür

string

optionsZorunlu

Açıklama

Seçenekler; düz ya da gruplu.

Tür

readonly NativeSelectOption[] | readonly NativeSelectOptionGroup[]

placeholder

Açıklama

Henüz seçim yokken gösterilen boş ilk seçeneğin metni. required ile bir değer seçildikten sonra yeniden seçilemez.

Tür

string

description

Açıklama

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

Tür

ReactNode

error

Açıklama

Verildiğinde alan geçersiz işaretlenir ve ileti select ile okunur.

Tür

string

invalid

Açıklama

Alanı iletisiz geçersiz işaretler.

Tür

boolean

Varsayılan

false

required

Açıklama

Değer zorunludur: select required alır, etikete * eklenir.

Tür

boolean

Varsayılan

false

necessityIndicator

Açıklama

Formun hangi alanları işaretlediği; TextInput'taki gibi.

Tür

'required' | 'optional'

Varsayılan

'required'

size

Açıklama

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

Tür

'sm' | 'md' | 'lg'

Varsayılan

'md'

disabled

Açıklama

Alanı ve etiketini devre dışı bırakır.

Tür

boolean

Varsayılan

false

name

Açıklama

Form gönderilirken kullanılan alan adı.

Tür

string

value

Açıklama

Kontrollü değer. onValueChange ile birlikte verin.

Tür

string

defaultValue

Açıklama

Kontrolsüz alanın başlangıç değeri.

Tür

string

onValueChange

Açıklama

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

Tür

(value: string, event: ChangeEvent<HTMLSelectElement, Element>) => void

className

Açıklama

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

Tür

string

Veri öznitelikleri

• data-component="native-select": kök öğede.
• data-part: box, control, chevron.