Form

Kurulum

Paket

@bigbang/ui

İçe aktarma

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

Kaynak

Form.tsx

Storybook

Form · Playground

Form, @bigbang/ui paketindedir.

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

<Form onSubmit={(data) => save(data)} errors={serverErrors}>
  <TextInput label="E-posta" name="email" type="email" required error={serverErrors.email} />
  <Button type="submit">Gönder</Button>
</Form>;

collectProblems(form, errors) yardımcısı sorunları formdan okur; özel bir özet çizmek için kullanın.

Özellikler

onSubmit

Açıklama

Form sorunsuz gönderildiğinde form verisiyle çağrılır.

Tür

(data: FormData, event: FormEvent<HTMLFormElement>) => void

onInvalid

Açıklama

Gönderim durdurulunca sorunlarla çağrılır.

Tür

(problems: FormProblem[]) => void

errors

Açıklama

Alan adına göre sunucu hataları. Bir gönderimden sonra değişince özet onları gösterir ve odak alır. Her mesajı alanın error özelliğine de verin.

Tür

Readonly<Record<string, string>>

summary

Açıklama

Gönderim durunca formun üstünde doğrulama özetini gösterir ve odaklar. false ile odak ilk geçersiz alana gider.

Tür

boolean

Varsayılan

true

aria-label

Açıklama

Formun erişilebilir adı, ör. sayfa başlığı.

Tür

string

aria-labelledby

Açıklama

Formu adlandıran başlığın kimliği.

Tür

string

className

Açıklama

Form öğesine eklenir; yalnızca yerleşim için kullanın.

Tür

string

Veri öznitelikleri

• data-component="form": form öğesi üzerinde.
• data-part: summary, summary-title.