Field Section
Mengelompokkan field dengan section dan mengatur kelompok melalui sectionConfig.
Section mengelompokkan field dalam satu form, misalnya informasi akun dan profil. Field dimasukkan ke kelompok melalui fieldConfig, lalu kelompoknya diatur melalui sectionConfig. Coba klik judul Profil pada preview untuk membuka atau menutupnya.
Penggunaan
Gunakan form dari useForm. Lihat persiapan awal.
const schema = z.object({ username: z.string(), email: z.email() });
<ErlForm
form={form}
schema={schema}
fieldConfig={{
username: { section: "account" },
email: { section: "account" },
}}
sectionConfig={{
account: { title: "Akun", collapsible: true, defaultOpen: true },
}}
/>Hubungan field dan section
| Bagian | Contoh | Peran |
|---|---|---|
| Field pada schema | username, email | Menentukan field dan aturan datanya. |
fieldConfig.namaField.section | section: "account" | Menempatkan field ke kelompok account. |
sectionConfig.account | title: "Informasi akun" | Mengatur tampilan kelompok account. |
Nama account dan profile adalah key kelompok. Anda bebas memilih namanya, tetapi nilai section harus sama dengan key di sectionConfig.
sectionConfig mengatur kelompok field yang sudah ditandai melalui section. Menulis judul di sectionConfig saja belum memasukkan field mana pun ke kelompok tersebut.
Opsi sectionConfig
| Opsi | Fungsi |
|---|---|
title | Judul kelompok, misalnya Informasi akun. |
description | Penjelasan singkat di bawah judul. |
collapsible | Mengaktifkan bagian yang bisa dibuka dan ditutup menggunakan elemen details. |
defaultOpen | Menentukan apakah section collapsible terbuka saat pertama dirender. |
className | Class CSS pembungkus section. |
headerClassName | Class CSS untuk header section. |
contentClassName | Class CSS untuk isi section. |
Pada contoh di atas, kelompok account selalu terlihat, sedangkan kelompok profile bisa dibuka dan ditutup.
Section tidak mengubah bentuk data
Section hanya mengatur pengelompokan tampilan. Nilai yang disubmit tetap mengikuti schema:
{
username: "erlangga",
email: "erlangga@example.com",
fullName: "Erlangga",
bio: "React developer",
}Tidak ada object account atau profile dalam hasil tersebut karena keduanya hanya nama kelompok.