Label

Ne zaman kullanılır

Label, Field kullanmayan bir denetimi adlandırmak içindir: onay kutusu ya da anahtarın yanındaki metin, bir tablo hücresindeki girdi, kendi düzeninizi kurduğunuz bir form.

Ne zaman kullanılmaz

• Field içindeki denetim için: Field’ın label prop’u etiketi bağlar.
• TextInput için: TextInput etiketini kendi çizer.
• Bir başlık ya da açıklama için: Heading ya da Text kullanın; Label yalnızca denetimleri adlandırır.

Anatomi

Alan etiketi

AçıkKoyu

Kodu kopyala

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

export default function Default() {
  return (
    <div className="flex max-w-80 flex-col gap-xs">
      <Label htmlFor="label-default">Alan etiketi</Label>
      <input id="label-default" className="h-(--bigbang-input-height-md) w-full rounded-(--bigbang-input-radius) border border-line-input bg-surface-raised px-(--bigbang-input-padding-inline) type-body-md" />
    </div>
  );
}

1. Metin: label-md ya da label-sm yazı stili, color-text-default.
2. Zorunluluk işareti: * ve görünmeyen “zorunlu”, ya da “(isteğe bağlı)”.

Davranış

• htmlFor ile bağlanan denetim, etiketin metnini erişilebilir ad olarak alır.
• Etikete tıklamak denetime odaklanır; onay kutusunu değiştirir.
• * işareti aria-hidden taşır; ad içinde yalnızca “zorunlu” ya da “required” okunur.
• disabled yalnızca görünümü değiştirir; denetimi ayrıca devre dışı bırakın.

Yönergeler

• Etiketi denetimin üstüne ya da onay kutusunun sağına koyun.
• Bir formda tek işaretleme yöntemi kullanın: azınlığı işaretleyin.
• Denetime id verin ve aynı değeri htmlFor olarak geçin.

İçerik

• Etiket kısa bir ad öbeğidir; iki nokta koymayın.
• Onay kutusu etiketi bir seçeneği tam söyler: “Bildirimleri e-postayla al”.

Türkçe	İngilizce
zorunlu	required
isteğe bağlı	optional

İlgili bileşenler

• Field: Etiket, yardım metni ve hatayı birlikte bağlar.
• TextInput: Kendi etiketi olan metin girdisi.
• VisuallyHidden: Görünmeyen etiket gerektiğinde.