Form

Ne zaman kullanılır

Form, birden çok alanı olan ve gönderilen her formun kabıdır. Gönderimde alanları denetler ve sorun varsa gönderimi durdurur.

Ne zaman kullanılmaz

• Anında uygulanan ayarlar için: Switch gibi denetimler gönderim beklemez.
• Arama için: SearchInput kendi gönderimini yönetir.

Anatomi

Ad soyad* zorunlu

E-posta* zorunlu

Gönder

AçıkKoyu

Kodu kopyala

import { Button, Form, TextInput } from '@bigbang/ui';

export default function Default() {
  return (
    <Form className="max-w-md">
      <TextInput label="Ad soyad" name="name" required autoComplete="name" />
      <TextInput label="E-posta" name="email" type="email" required autoComplete="email" />
      <Button type="submit" className="self-start">
        Gönder
      </Button>
    </Form>
  );
}

1. Özet: Gönderim durunca formun üstünde; başlık ve sorun bağlantıları.
2. Alanlar: Kendi hata mesajlarıyla.
3. Gönder düğmesi: type="submit".

Davranış

• Gönderimde şunlar toplanır: errors içindeki sunucu hataları, aria-invalid taşıyan alanlar ve tarayıcı kısıtları (required, type="email", pattern).
• Sorun varsa gönderim durur, özet belirir ve odak özete gider. Özet her durdurulan gönderimde yeniden belirir.
• Özetteki bağlantı alanı ekranın ortasına kaydırır ve odaklar.
• schema verilirse form verisi bir nesne olarak (birden fazla kullanılan ad liste olur) şemayla denetlenir. Her sorun yoluna göre (noktayla birleşen ad, ör. address.city) alana gider; alanın kendi error’ı varsa o kazanır. Yolu olmayan sorun özette bağlantısız metin olarak görünür. Şema sorunları yerel ve sunucu sorunlarıyla aynı özette toplanır.
• Eşzamansız bir şema beklenir; bu sırada gönder düğmesi odaklanabilir kalır ama aria-disabled olur, form aria-busy olur ve ikinci gönderim yok sayılır.
• Sorun yoksa onSubmit FormData ile, şema varsa üçüncü bağımsız değişken olarak şemanın çıktısıyla çağrılır.
• Gönderimden sonra errors değişirse özet onları da gösterir.

Yönergeler

• Alan hatalarını alanın kendisinde de gösterin (error); özet yalnızca bir yol göstericidir.
• Hata mesajlarını eylem olarak yazın: “E-posta adresi girin”, “Hatalı” değil.
• Gönder düğmesini devre dışı bırakmayın; kullanıcı neyin eksik olduğunu özetten öğrenir.

İçerik

Türkçe	İngilizce
Devam etmek için 1 alanı düzeltin	Fix 1 field to continue
Devam etmek için {count} alanı düzeltin	Fix {count} fields to continue

İlgili bileşenler

• Field: Etiket, açıklama ve hata.
• TextInput: En sık kullanılan alan.