Jadwal pickup dikirim ke alamat ini.
FormField
Label, bantuan, dan pesan error yang otomatis terhubung ke satu kontrol form.
Dasar
Bungkus satu W4cFormInput dengan FormField. Label, hint, required, dan ID terhubung otomatis tanpa menulis for atau aria-describedby sendiri.
Error dan disabled
Berikan error berupa teks dari validasi aplikasi. Hint tetap terlihat saat error muncul. disabled pada field diteruskan ke kontrol di dalamnya.
Gunakan nama yang dikenali petugas.
Nama lokasi wajib diisi.
Dikelola oleh tim operasional.
Label dan hint kustom
Gunakan slot label dan hint untuk format yang lebih kaya. Bila perlu ID sendiri, pasang id pada FormField; ID itu dipakai oleh input, bukan wrapper.
Gunakan nomor referensi internal, misalnya OPS-042.
Contoh: tambah lokasi pickup
Form ini memakai validasi inline custom dan novalidate agar browser tidak menampilkan popup validasi. Setelah submit gagal, fokus diarahkan ke isian pertama yang perlu diperbaiki.
API
Props
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| id | string | otomatis | ID kontrol yang dibungkus; stabil saat SSR dan hydration. Mengalahkan id pada FormInput di dalamnya. |
| label | string | — | Label yang terlihat dan dapat diklik untuk memfokuskan kontrol. |
| hint | string | — | Bantuan yang tetap terlihat, termasuk ketika ada error. |
| error | string | — | Pesan validasi dari aplikasi; teks nonkosong menandai kontrol invalid. |
| required | boolean | false | Penanda wajib dan atribut required pada kontrol. |
| disabled | boolean | false | Menonaktifkan kontrol yang dibungkus. |
| group | boolean | false | Menampilkan label sebagai keterangan, bukan <label for>. Pakai ini bila isinya kontrol yang sudah punya label sendiri — radio group, atau checkbox dengan teksnya sendiri. Satu label hanya boleh menamai satu kontrol, jadi kontrol di dalamnya menunjuk ke keterangan itu lewat aria-labelledby. |
Slots
| Slot | Tipe | Default | Keterangan |
|---|---|---|---|
| default | { id, describedBy, invalid, required, disabled } | — | Satu kontrol. W4cFormInput menerima konteks otomatis; slot props dapat diikat manual pada kontrol kustom. |
| label | — | — | Menggantikan teks label. |
| hint | — | — | Menggantikan hint dengan konten teks/link. |
| error | { error } | — | Format pesan error; hanya tampil ketika prop error berisi teks. |
FormField tidak melakukan validasi atau menyimpan nilai. Ia menerima pesan error dari aplikasi; perubahan nilai tetap menggunakan v-model pada kontrol.