Label

Form etiketi: 14px, 500 ağırlık, ink rengi. Kontrolü kendin bağladığında doğrudan kullan; Field bunu senin yerine render'lar.

KararlıKaynak kod

E-posta

<Label htmlFor="email">E-posta</Label>
<Input id="email" type="email" placeholder="sen@sirket.com" />

Import

tsx

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

Örnekler

Zorunlu

required, yardımcı teknolojilerden gizlenen bir * ekler. Bu yalnızca görsel bir işarettir: alanın duyurulması ve doğrulanması için required'ı kontrolün kendisine de ver.

Ad soyad

<Label htmlFor="name" required>Ad soyad</Label>
<Input id="name" required />

Devre dışı

disabled, etiketi devre dışı bir kontrolle uyumlu olacak şekilde soluklaştırır. Kendi başına hiçbir şeyi devre dışı bırakmaz.

Çalışma alanı

<Label htmlFor="workspace" disabled>Çalışma alanı</Label>
<Input id="workspace" defaultValue="acme" disabled />

API referansı

Label ref'ini <label>'a iletir, diğer label attribute'larını (htmlFor, id, …) olduğu gibi geçirir.

Prop	Tip	Varsayılan	Açıklama
`required`	`boolean`	`false`	Yardımcı teknolojilerden gizlenen görsel bir * işareti ekler.
`disabled`	`boolean`	`false`	Etiketi devre dışı bir kontrolle uyumlu olacak şekilde soluklaştırır.
`htmlFor`	`string`	–	Etiketin adlandırdığı kontrolün id'si.

Stil verme

Seçici	Değerler
`.mrd-label`	Kök <label>
`.mrd-label__required`	Zorunlu işareti
`data-disabled`	`disabled` verildiğinde bulunur

Erişilebilirlik

Etiketi her zaman kontrolün id'siyle eşleşen htmlFor ile bağla; böylece etikete tıklamak kontrole focus verir ve etiket kontrolün erişilebilir adı olur.
* işareti aria-hidden'dır; “zorunlu” bilgisi kontrolün kendi required attribute'undan duyurulur.

Kullanım ilkeleri

Yap

Etiketleri kısa isimler olarak yaz (“E-posta”, “Şirket adı”) ve her zaman görünür tut.

Kaçın

Placeholder'ı tek etiket olarak kullanmak.

İlgili sayfalar

Field: etiket, kontrol, açıklama ve hata birbirine bağlı gelir.
Input, Textarea, NativeSelect.