Nilai: Belum diisi
FormInput
Input dengan tampilan custom W4C untuk teks, email, angka, pencarian, dan data satu baris lainnya.
Dasar
Gunakan v-model untuk membaca dan mengubah nilai. Di dalam FormField, input otomatis mendapat ID, label, hint, error, required, dan disabled.
Ukuran
Ukuran sm, md, dan lg setinggi 28, 34, dan 40 px, selaras dengan Button. Lebar mengikuti wadahnya.
Ikon, prefix, suffix, dan aksi
Gunakan ikon Iconify, prefix/suffix teks, atau slot leading/trailing untuk kontrol tambahan. Sebutkan satuan pada label karena prefix/suffix bawaan bersifat dekoratif.
Error, readonly, dan disabled
Readonly tetap bisa difokuskan, dipilih, dan disalin. Disabled tidak bisa diedit dan dilewati saat navigasi keyboard. Pesan error biasanya berasal dari FormField.
Format email belum sesuai.
Bisa dipilih dan disalin.
Tanpa FormField
Input dapat dipakai sendiri, misalnya pada pencarian toolbar. Berikan aria-label atau label HTML yang terhubung dengan id.
API
Props
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| v-model | string | number | null | undefined | — | Nilai kontrol. type=number menghasilkan angka bila valid, dan string kosong ketika dikosongkan. Mendukung modifier .trim dan .number. |
| type | 'text' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'url' | 'text' | Jenis input. Kontrol tanggal, file, dan pilihan akan memiliki komponen Form tersendiri. |
| size | 'sm' | 'md' | 'lg' | 'md' | Tinggi, ukuran teks, dan ikon. |
| id | string | otomatis | ID untuk input mandiri. Di dalam FormField, gunakan id pada FormField. |
| disabled | boolean | false | Tidak bisa diedit/fokus. Disabled dari FormField juga berlaku. |
| readonly | boolean | false | Tidak bisa diedit; masih dapat difokuskan dan disalin. |
| required | boolean | false | Atribut required; diwarisi juga dari FormField. |
| invalid | boolean | false | Tampilan error dan aria-invalid untuk pemakaian mandiri. |
| icon / trailing-icon | string | — | Nama ikon Iconify di kiri/kanan input. |
| prefix / suffix | string | — | Teks dekoratif sebelum/sesudah input. |
Slots
| Slot | Tipe | Default | Keterangan |
|---|---|---|---|
| leading | — | — | Menggantikan icon dan prefix; bisa berisi konten khusus. |
| trailing | — | — | Menggantikan suffix dan trailing-icon; bisa berisi tombol berlabel. |
Atribut name, placeholder, autocomplete, inputmode, min, max, step, maxlength, dan atribut ARIA diteruskan ke input. class/style diterapkan pada wrapper untuk tata letak. Event input, change, focus, blur, dan keyboard berasal dari input. update:modelValue digunakan oleh v-model. Ref komponen menyediakan focus(), blur(), dan select().