NativeSelect

Merid stiliyle platformun <select> elemanı. Tam native klavye desteğini, mobilde işletim sisteminin seçicisini ve form entegrasyonunu hiç JavaScript olmadan alırsın.

KararlıKaynak kod

<NativeSelect aria-label="Ülke" placeholder="Bir ülke seç">
<option value="tr">Türkiye</option>
<option value="de">Almanya</option>
<option value="nl">Hollanda</option>
</NativeSelect>

Import

tsx

import { NativeSelect } from "@merid/react";

Örnekler

Boyutlar

sm 36px, md 46px (varsayılan), lg 50px. Yükseklikler Input ile aynı olduğu için aynı satırda hizalanırlar.

<NativeSelect aria-label="Küçük" size="sm" defaultValue="a">…</NativeSelect>
<NativeSelect aria-label="Orta" size="md" defaultValue="a">…</NativeSelect>
<NativeSelect aria-label="Büyük" size="lg" defaultValue="a">…</NativeSelect>

Field içinde

Bir Field içindeyken select, id, aria-describedby, required ve disabled değerlerini context'ten alır; elle bağlamana gerek kalmaz.

Plan

Planını istediğin zaman değiştirebilirsin.

<Field label="Plan" description="Planını istediğin zaman değiştirebilirsin." required>
<NativeSelect placeholder="Bir plan seç">
  <option value="free">Ücretsiz</option>
  <option value="team">Ekip</option>
  <option value="business">Kurumsal</option>
</NativeSelect>
</Field>

Geçersiz ve devre dışı

Field'a verilen error, select'e aria-invalid ekler ve mesajı ona bağlar. Field dışında invalid'i doğrudan ver.

Bölge

Devam etmek için bir bölge seç.

Para birimi

<Field label="Bölge" error="Devam etmek için bir bölge seç.">
<NativeSelect placeholder="Bir bölge seç">…</NativeSelect>
</Field>

<Field label="Para birimi" disabled>
<NativeSelect defaultValue="eur">
  <option value="eur">EUR</option>
</NativeSelect>
</Field>

Controlled

value ve onChange'i native bir select'te olduğu gibi kullan.

Özet sıklığı

Geçerli değer: weekly

const [value, setValue] = useState("weekly");

<Field label="Özet sıklığı">
<NativeSelect value={value} onChange={(e) => setValue(e.target.value)}>
  <option value="daily">Günlük</option>
  <option value="weekly">Haftalık</option>
  <option value="monthly">Aylık</option>
</NativeSelect>
</Field>

API referansı

Ref ve tüm native select attribute'ları <select>'e gider; yalnızca className ve style dıştaki sarmalayıcıya uygulanır. Native size attribute'unun yerini aşağıdaki size prop'u alır.

Prop	Tip	Varsayılan	Açıklama
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Yükseklik: sm 36px, md 46px, lg 50px.
`invalid`	`boolean`	–	Geçersiz stilini (`data-invalid`) ve `aria-invalid`'i zorlar. Field içinde Field'ın error değerinden türetilir.
`placeholder`	`string`	–	Başa devre dışı ve gizli bir `value=""` seçeneği ekler; değer `""` olduğunda (uncontrolled başlangıçta ya da controlled `value=""` ile) görünür.
`children`	`ReactNode`	–	option ve optgroup elemanları.

Stil verme

Seçici	Değerler
`.mrd-native-select`	Sarmalayıcı <span>; `className` ve `style` buraya uygulanır
`.mrd-native-select__control`	<select> elemanı
`.mrd-native-select__chevron`	Dekoratif chevron ikonu
`data-size`	`sm` · `md` · `lg` (sarmalayıcıda)
`data-invalid`	Geçersizken kontrolde bulunur; danger kenarlığını sağlar (anlamı `aria-invalid` taşır)

Component değişkeni: Input ile ortak kullanılan --mrd-input-height.

Erişilebilirlik

Gerçek bir <select> olduğu için ekran okuyucular onu seçenekleriyle birlikte combobox ya da list box olarak duyurur, mobil tarayıcılar da native seçiciyi açar.
Ona bir ad ver: çevreleyen bir Field, htmlFor ile bir Label ya da aria-label. placeholder seçeneği etiket yerine geçmez.

Tuş	Ne yapar
`Tab`	Focus'u select'e taşır.
`Space`	Seçenek listesini açar (platforma göre değişir).
`↑↓`	Seçili seçeneği değiştirir.
`A–Z`	Yazılan karakterle başlayan ilk seçeneğe atlar.

Kullanım ilkeleri

Yap

NativeSelect'i bilinen seçeneklerden oluşan sade listeler için kullan, özellikle telefonda doldurulan formlarda.

Kaçın

İçine zengin içerik, ikon ya da arama koymak. Bunlar için Select kullan.

Yap

Mantıklı bir varsayılan yoksa seçim yapmaya yönlendiren bir placeholder kullan, örneğin “Bir plan seç”.

Kaçın

Placeholder'ı tek etiket olarak kullanmak.

İlgili sayfalar

Select: daha zengin seçenekler sunan özel listbox.
Field: etiket, açıklama ve hata bağlantısı.
Input: aynı boyutlarda tek satırlık metin.
SegmentedControl: iki ila beş görünür seçenek için.