Field

Tek bir kontrolü etiketi, yardım metni ve hata mesajıyla birlikte sarar ve bunları context üzerinden birbirine bağlar: htmlFor, aria-describedby, aria-invalid, required ve disabled.

<Field label="E-posta" description="Yalnızca makbuzlar için kullanıyoruz.">
<Input type="email" placeholder="sen@sirket.com" />
</Field>

Import

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

Örnekler

Hata

error verildiğinde kontrol aria-invalid="true" ve geçersiz stilini alır, mesaj da aria-describedby'ına eklenir. Temizlemek için undefined, null ya da false ver.

<Field label="Kullanıcı adı" error="Bu kullanıcı adı alınmış." required>
<Input defaultValue="ahmet" />
</Field>

Controlled input

Değeri Field tutmaz. Child'ı her zamanki gibi kontrol et, error'u da kendi state'inden türet.

const [name, setName] = useState("");
const error = name.length > 0 && name.length < 3 ? "En az 3 karakter kullan." : undefined;

<Field label="Proje adı" description="Kenar çubuğunda görünür." error={error}>
<Input value={name} onChange={(event) => setName(event.target.value)} />
</Field>

Uncontrolled input

defaultValue ve name ile kontrol kendi state'ini tutar ve formla birlikte gönderilir.

<Field label="Hakkında">
<Textarea name="bio" defaultValue="İstanbul'da tasarımcı." />
</Field>

Devre dışı

disabled kontrolü devre dışı bırakır ve etiketi soluklaştırır.

<Field label="Plan" disabled>
<NativeSelect defaultValue="team">
  <option value="free">Ücretsiz</option>
  <option value="team">Ekip</option>
</NativeSelect>
</Field>

Field'ı hangi kontroller okur

Input, Textarea ve NativeSelect bağlantıların tamamını okur. Kontrolün kendisine verilen prop'lar her zaman Field'ınkilerin önüne geçer.

• Checkbox adını Field etiketinden alır. Kendi children'ı yine tıklanabilir bir etiket olarak render'lanır ama açıklamasına (aria-describedby) dönüşür; böylece hiçbir zaman iki kez etiketlenmez.
• Switch, Field id'sini (böylece Field etiketi onu adlandırır), aria-describedby, aria-invalid ve disabled'ı alır.
• RadioGroup adını Field etiketinden alır (aria-labelledby); açıklamasını, hatasını, required ve disabled'ı da devralır.

Her kontrol aynı kurala uyar: semantiği aria-invalid taşır, stili data-invalid yönetir.

API referansı

Field bir <div> render'lar, ref'ini iletir ve diğer div attribute'larını olduğu gibi geçirir.

Özel kontroller için useFieldContext() bağlantı bilgilerini (controlId, labelId, descriptionId, errorId, invalid, required, disabled) döndürür; Field dışında null döner.

Stil verme

Etiket bir Label'dır (.mrd-label).

Erişilebilirlik

• Etiket kontrolü adlandırır; açıklama ve hata, aria-describedby üzerinden ondan sonra okunur.
• Hata bir live region değildir. Gönderimde doğrulama yapıyorsan mesaj duyurulsun diye focus'u ilk geçersiz kontrole taşı.
• required kontrolün kendisine atanır; böylece ekran okuyucu bunu duyurur ve native doğrulama devreye girer.

Kullanım ilkeleri

İlgili sayfalar

• Label: Field'ın render'ladığı etiket.
• Input, Textarea, NativeSelect, Checkbox, Switch, RadioGroup: Field'ı okuyan kontroller.