Field

Ne zaman kullanılır

Field, kütüphanede hazır alanı olmayan bir denetime etiket, yardım metni ve hata bağlamak içindir: özel bir girdi, bir üçüncü taraf denetimi ya da Field.Control ile yalın bir <input>.

Ne zaman kullanılmaz

• Metin girdisi için: TextInput etiketi, yardım metnini ve hatayı kendisi bağlar.
• Birden çok denetimi gruplamak için: Gruplar fieldset ve legend ile kurulur; Field tek denetim içindir.
• Bir form dışı etiket için: Yalnızca metin gerekiyorsa Text kullanın.

Anatomi

Alan etiketi

Bu alan boş bırakılamaz.

Alan etiketi

Yardım metni burada yer alır.

• Bu alan boş bırakılamaz.
• En az 3 karakter girin.

AçıkKoyu

Kodu kopyala

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

export default function Errors() {
  return (
    <div className="flex max-w-80 flex-col gap-lg">
      <Field label="Alan etiketi" error="Bu alan boş bırakılamaz.">
        <Field.Control />
      </Field>
      <Field label="Alan etiketi" description="Yardım metni burada yer alır." error={['Bu alan boş bırakılamaz.', 'En az 3 karakter girin.']}>
        <Field.Control />
      </Field>
    </div>
  );
}

1. Etiket: label; label-md yazı stili, gerektiğinde zorunluluk işareti.
2. Denetim: Field.Control ya da render ile bağlanan kendi denetiminiz.
3. Yardım metni: description; body-sm, color-text-subtle.
4. Hata: error; body-sm, color-text-danger, birden çok mesajda madde listesi.
5. Sayaç: İsteğe bağlı Field.Counter; sağa yaslı.

Davranış

• error verilince ya da invalid açılınca denetim aria-invalid="true" alır.
• aria-describedby önce yardım metnini, sonra hatayı gösterir.
• Hata canlı bölge değildir: başarısız gönderimden sonra odak hata özetine ya da ilk geçersiz alana taşınır, mesaj alanla birlikte okunur.
• Hata metni belirirken motion.fieldMessage ile solar ve 4 px aşağı iner; sallanmaz.
• Field.Counter yazmayı engellemez; engellemek için denetime maxLength verin.

Yönergeler

• Her alana görünür bir etiket verin; yer tutucu etiketin yerini tutmaz.
• Bir formda tek işaretleme yöntemi kullanın: azınlığı işaretleyin.
• Hata mesajı ne yapılacağını söylesin: “En az 3 karakter girin.”
• Sayacı yalnızca sınırı olan alanlarda gösterin.

İçerik

• Etiket kısa bir ad öbeğidir; iki nokta koymayın.
• Hata mesajı tam cümledir ve nokta ile biter.

Türkçe	İngilizce
zorunlu	required
isteğe bağlı	optional
2 karakter kaldı	2 characters left
2 karakter fazla	2 characters too many

İlgili bileşenler

• TextInput: Field üzerine kurulu metin girdisi.
• Provider: Zorunluluk ve sayaç metinlerinin dili.
• Text: Form dışı metin.