Field Config

Schema menentukan field dan validasinya. fieldConfig mengatur tampilan serta perilaku field tersebut: label, placeholder, deskripsi, jenis input, dan lainnya.

Penggunaan

Gunakan form dari useForm. Lihat persiapan awal.

example.tsx

const schema = z.object({ username: z.string(), email: z.email(), bio: z.string() });

<ErlForm
  form={form}
  schema={schema}
  fieldConfig={{
    username: {
      label: "Username",
      placeholder: "Masukkan username",
      description: "Nama yang ditampilkan.",
    },
    bio: { type: "textarea" },
  }}
/>

Properti fieldConfig

Opsi	Fungsi
`label`	Teks label input.
`placeholder`	Petunjuk ketika input kosong.
`description`	Teks bantuan untuk field.
`type`	Varian input seperti `text`, `password`, atau `textarea`.
`options`	Daftar pilihan untuk Select, masing-masing berisi `label` dan `value`.
`layout`	Lebar field pada grid 12 kolom, misalnya `{ colSpan: 12, md: 6 }`.
`section`	Nama kelompok tempat field ditampilkan.
`className` / `wrapperClassName`	Class CSS untuk input atau pembungkus field.

Opsi label, placeholder, type, dan options di atas digunakan pada input biasa. Konfigurasi Object dan Array mengikuti struktur field bersarang.

Cara membaca fieldConfig

Pada contoh di atas, schema memiliki username, email, dan bio. Konfigurasi memakai nama yang sama:

fieldConfig.username mengatur input username.
fieldConfig.email mengatur input email.
fieldConfig.bio.type: "textarea" membuat biography tampil sebagai textarea.

Anda cukup mengisi konfigurasi yang dibutuhkan. Field yang ada di schema tetap dirender meskipun tidak ditulis dalam fieldConfig.

Validasi dan perilaku field

Aturan validasi seperti .min(3) tetap ditulis pada schema dan diberikan ke validators TanStack Form. Mengganti label atau placeholder tidak mengubah aturan validasi.

Untuk perilaku berdasarkan nilai form, tersedia:

Opsi	Fungsi
`showIf`	Menampilkan field ketika fungsi mengembalikan `true`.
`disableIf`	Menonaktifkan input ketika kondisi terpenuhi.
`readOnlyIf`	Membuat input hanya bisa dibaca.
`requiredIf`	Mengatur status required pada input.
`clearOnHide`	Mereset nilai ketika field disembunyikan.

Aturan wajib isi untuk validasi aplikasi tetap perlu didefinisikan pada schema; requiredIf tidak menggantikan aturan itu.

FormValues diambil dari schema dengan z.infer<typeof schema>. Memberikan tipe ini ke <ErlForm<FormValues>> membantu TypeScript memeriksa nama field dan opsi konfigurasinya, termasuk untuk Object dan Array.

Untuk mengelompokkan beberapa field, lanjutkan ke Field Section.

Referensi opsi 1.0.0

Opsi input	Bentuk / catatan
label	ReactNode atau callback nilai scope ke ReactNode
placeholder / description	String atau callback sinkron
options	Array label/value string atau callback; mengaktifkan select
type	text, password, textarea, number, checkbox, radio, email, url, date, time, datetime-local, file, range, color
min / max	Number atau string; diterapkan renderer angka dan string native
step	Number atau any; renderer angka dan string native
accept / multiple	Ada pada tipe; belum diterapkan renderer file
component	Komponen input per field; prioritas di atas registry
labelClassName / descriptionClassName / errorClassName	Class elemen masing-masing
showIf / clearOnHide	Visibilitas dan reset nilai saat tersembunyi
disableIf / readOnlyIf / requiredIf	Callback boolean untuk state input
layout / section	Grid dan pengelompokan root

Daftar type adalah opsi TypeScript, bukan jaminan semua schema dapat diubah menjadi semua input. Renderer utamanya ditentukan oleh schema: number selalu input number, boolean checkbox, tanggal/file memakai metadata khusus. Password/textarea/radio/color/range diterapkan pada jalur string yang sesuai. Lihat input khusus.

Object memakai konfigurasi child langsung dan component opsional. Array menerima child langsung untuk item object, item untuk konfigurasi elemen eksplisit, array untuk tombol/batas, serta inputType/options untuk checkbox group. Tuple memakai indeks posisi. Container tidak otomatis menerima seluruh opsi input seperti label dan placeholder.

import type { FieldConfig } from "erlangform";

const config = {
  profile: { firstName: { label: "Nama depan" } },
  contacts: {
    array: { minItems: 1, maxItems: 5, reorderable: true },
    item: { phone: { label: "Telepon" } },
  },
} satisfies FieldConfig<FormValues>;

Contoh konfigurasi ini memerlukan FormValues dengan profile.firstName dan contacts berupa array object berisi phone. Definisikan schema/nilai awal mengikuti Object dan Array. Jika item ditulis, isinya menggantikan fallback child pada parent. Konfigurasi child flat lama tetap didukung sebagai fallback, tetapi pola bersarang menghindari benturan nama.

Pelajari scope callback, layout, serta komponen kustom.

Penggunaan

Properti fieldConfig

Cara membaca fieldConfig

Validasi dan perilaku field

TypeScript

Referensi opsi 1.0.0

Di halaman ini