Select

Stilli bir listeden tek bir seçenek seç.

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

export function Example() {
  return (
    <>
      <span id="region-label">Bölge</span>
      <Select.Root defaultValue="eu-west" name="region" placeholder="Seç…">
        <Select.Trigger aria-labelledby="region-label" />
        <Select.Content>
          <Select.Item value="us-east">ABD Doğu</Select.Item>
          <Select.Item value="us-west">ABD Batı</Select.Item>
          <Select.Item value="eu-west">AB Batı</Select.Item>
          <Select.Item value="ap-south" disabled>
            Asya Pasifik (yakında)
          </Select.Item>
        </Select.Content>
      </Select.Root>
    </>
  );
}

Import

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

Anatomi

<Select.Root>
  <Select.Trigger />
  <Select.Content>
    <Select.Item value="a">A</Select.Item>
  </Select.Content>
</Select.Root>

• Root değeri ve açık state'ini tutar; name verildiğinde gizli bir <input> render'lar.
• Trigger, role="combobox" butonudur. Seçili etiketi ya da placeholder'ı gösterir.
• Content, portal ile render'lanan role="listbox" elemanıdır. Seçenekler etiketlerini bildirebilsin diye (gizli olarak) mount'lu kalır.
• Item, tek bir role="option" elemanıdır. Metin children'ı etikettir; tetikleyicide gösterilir ve yazarak arama (typeahead) için kullanılır.

Örnekler

Controlled

value ve onValueChange ver. Boş string hiçbir şeyin seçili olmadığı anlamına gelir ve placeholder gösterilir.

const [plan, setPlan] = useState("");

<Select.Root value={plan} onValueChange={setPlan} placeholder="Paket seç">
  <Select.Trigger aria-label="Paket" invalid={plan === ""} />
  <Select.Content>
    <Select.Item value="starter">Başlangıç</Select.Item>
    <Select.Item value="team">Ekip</Select.Item>
    <Select.Item value="enterprise">Kurumsal</Select.Item>
  </Select.Content>
</Select.Root>

Boyutlar ve devre dışı

<Select.Trigger size="sm" aria-label="Sıklık" />
<Select.Trigger size="md" aria-label="Sıklık" />
<Select.Trigger size="lg" aria-label="Sıklık" />

<Select.Root disabled placeholder="Devre dışı">
  <Select.Trigger aria-label="Devre dışı select" />
  <Select.Content>
    <Select.Item value="x">Kullanılamıyor</Select.Item>
  </Select.Content>
</Select.Root>

Form içinde

Root'a name (istersen required ve form da) ver. Gönderimde değeri gizli bir input taşır.

<form>
  <Select.Root name="region" required>
    <Select.Trigger aria-label="Bölge" />
    <Select.Content>…</Select.Content>
  </Select.Root>
</form>

API referansı

Root

Trigger

value dışındaki tüm <button> attribute'larını kabul eder. Children verilirse gösterilen etiketin yerine geçer. Verdiğin id korunur (böylece <label htmlFor> çalışır) ve listbox bu id ile etiketlenmeye devam eder. Bir Field içinde tetikleyici, her Merid kontrolü gibi bağlantıları devralır: field'ın id'si ve etiketi (aria-labelledby), açıklama ve hata için aria-describedby, aria-invalid + data-invalid, aria-required ve disabled. Açıkça verilen prop'lar önceliklidir.

Content

Tüm <div> attribute'larını kabul eder. Listbox, tetikleyicinin genişliğini alır.

Item

children dışındaki tüm <div> attribute'larını kabul eder. Senin onClick ve onPointerMove handler'ların önce çalışır; seçeneği seçmeyi ya da vurgulamayı atlamak için içlerinde event.preventDefault() çağır.

Stil verme

Tetikleyici yüksekliği, data-size değerine göre ayarlanan --mrd-select-height değişkeninden gelir.

Erişilebilirlik

WAI-ARIA Select-Only Combobox desenini izler. Focus tetikleyicide kalır; vurgulanan seçenek aria-activedescendant ile bildirilir. Tetikleyiciye aria-label, aria-labelledby ya da bir <label htmlFor> tarafından gösterilen bir id ile erişilebilir bir ad ver.

Kullanım ilkeleri

İlgili sayfalar

• NativeSelect: platformun <select> elemanı; mobilde ve uzun listelerde en iyisi.
• DropdownMenu: değerler için değil, aksiyonlar için.
• Field: bir kontrolün çevresinde etiket, ipucu ve hata.