Styling dan aksesibilitas
CSS variables, class override, dan tanggung jawab renderer.
Stylesheet dimuat otomatis. Ganti variabel CSS pada pembungkus form:
.my-form {
--erlform-primary: #0f766e;
--erlform-primary-soft: #ccfbf1;
--erlform-text: #172033;
--erlform-muted: #64748b;
--erlform-border: #dbe2ea;
--erlform-border-strong: #cbd5e1;
--erlform-surface: #ffffff;
--erlform-surface-muted: #f8fafc;
--erlform-danger: #dc2626;
--erlform-radius: 8px;
--erlform-control-height: 44px;
}Pasang className my-form pada HTML form. Ubah variabel yang sama pada selector dark mode aplikasi; tidak ada prop tema tersendiri.
| Opsi input | Target |
|---|---|
| className | Kontrol native yang menerapkannya |
| wrapperClassName | Pembungkus field tunggal |
| labelClassName | Label |
| descriptionClassName | Deskripsi |
| errorClassName | Pesan error |
Section memiliki className, headerClassName, dan contentClassName sendiri. Container array/record/tuple tidak menerima seluruh opsi input tunggal.
Aksesibilitas
Input bawaan menghubungkan label dan ID deskripsi/error serta menggunakan atribut invalid/required pada kontrol yang mendukungnya. Section collapsible menggunakan details/summary. Wizard menandai langkah aktif dan memakai area live.
Uji keyboard dan pembaca layar pada form Anda. Radio dan checkbox group belum menerapkan seluruh state field tunggal. Input native belum meneruskan handleBlur secara umum; untuk validasi onBlur/touched gunakan custom input yang memanggil field.handleBlur.
Contoh penggunaan
:root {
--erlform-primary: #0f766e;
--erlform-radius: 12px;
}