
Bagian pertama pengenalan komponen Vuetify ini akan membahas mengenai anatomi dan cara penggunaan komponen dari yang paling dasar. Contoh kode disertakan dan bisa diuji langsung tanpa perlu menginstall aplikasi. Yuk ikuti pembelajarannya.
Form input adalah komponen yang bisa digunakan untuk kolom inputan dari user. Misalnya form login biasanya terdiri dari inputan email dan password. Nah pada materi kali ini, kita akan mengenal beberapa form input (selanjutnya disebut komponen) yang tersedia di Vuetify.
Tujuan Pembelajaran
Memahami pembuatan inputan user menggunakan komponen yang disediakan oleh Vuetify serta memahami cara menggunakan atribut-atribut yang dimilikinya.
Komponen
Text Field: v-text-field
Tool Uji Coba
Playground Vuetify yang dapat diakses melalui play.vuetifyjs.com.
Pembahasan
Text Field adalah komponen Vuetify yang dapat digunakan untuk mengumpulkan informasi dari pengguna seperti nama, email, password, dan lain sebagainya.
Komponen ini terdiri dari 6 (enam) bagian yaitu:
- Container: bagian yang membungkus isi dari text field
- prepend icon: icon kustom yang letaknya sebelum input
- Prepend-inner icon: icon kustom yang letaknya di permulaan input
- Label: teks yang digunakan untuk memberitahu user terkait input
- Append-inner icon: icon kustom yang letaknya persis diakhir input
- Append icon: icon kustom yang letaknya setelah input

Mulai dari nomor 2 sampai 6 bisa digunakan sekaligus atau beberapa bagian saja. jadi kita bisa menggunakan input dengan label saja, input dengan label dan satu icon, input dengan label dan 2 icon, atau lainnya. Tergantung kebutuhan kita.
Penggunaan Text Field
Contoh penggunaan textfield secara paling dasar adalah seperti di bawah ini:
<v-text-field label="Email"></v-text-field>
Jika ingin menambahkan icon kita bisa menggunakan prepend-icon="nama-icon", prepend-inner-icon="nama-icon", append-inner-icon="nama-icon", atau append-icon="nama-icon".
Contonya adalah sebagai berikut:
<v-text-field label="Email" prepend-icon="mdi-email"></v-text-field>
Vuetify secara resmi menggunakan icon dari Material Design Icon untuk menambahkan icon di Playground. Silahkan coba contoh kode di atas menggunakan Playground Vuetify dan lihat hasilnya.
Mengubah Warna
Secara umum, komponen-komponen dalam Vuetify dapat diubah menggunakan properti color="kode-warna" atau color="nama-warna". Referensi warna yang bisa digunakan dalam Vuetify bisa diakse melalui halaman Material Color Pallete. Contoh penggunaannya adalah sebagai berikut:
<v-text-field label="Email" prepend-icon="mdi-email" color="pink-darken-4"></v-text-field>
Mengubah Ukuran Densitas
Komponen-komponen Vuetify secara umum memiliki 3 jenis densitas yaitu: 'default' | 'comfortable' | 'compact'. Contoh penggunaannya adalah sebagai berikut:
<v-text-field label="Email" prepend-icon="mdi-email" color="pink-darken-4" density="compact"></v-text-field>
Menambah Keterangan
Keterangan pada input bisa ditambah menggunakan properti hint="isi keterangan". Keterangan yang ditambahkan menggunakan hint akan muncul di bawah input ketika kursor sedang aktif didalamnya (diklik). Kalau kursor tidak aktif maka keterangan otomatis disembunyikan. Kalau ingin keterangannya selalu muncul maka kita bisa menambahkan properti persistent-hint. Contoh penggunaan hint sebagai berikut:
<v-text-field label="Email" prepend-icon="mdi-email" color="pink-darken-4" density="compact" hint="Silahkan tulis alamat email yang valid"></v-text-field>
Mengubah Varian
Komponen text field memiliki beberapa variant yaitu: | 'underlined' | 'outlined' | 'filled' | 'solo' | 'solo-inverted' | 'solo-filled' | 'plain'. Cara menggunakannya cukup menambahkan properti variant="nama-variant". Contoh:
<v-text-field label="Email" prepend-icon="mdi-email" color="pink-darken-4" density="compact" hint="Silahkan tulis alamat email yang valid" variant="outline"></v-text-field>
Sebetulnya masih banyak properti yang dapat digunakan untuk membuat text field sesuai kebutuhan kita seperti rounded, clearable, base-color, dan lain sebagainya. Namun pada materi kali ini kita cukupkan dulu pada properti-properti yang paling sering digunakan itu dulu. Nanti properti lainnya akan dibahas pada materi berikutnya secara bertahap.
Praktikum
Untuk menguji pemahaman dan mengasah kemampuan menggunakan komponen text field, cobalah buat dua buah form input dengan ketentuan sebagai berikut:
- Sebuah input dengan label Email memiliki icon email (mdi-email). Input berwarna teal dengan varian outline.
- Sebuah input dengan label Password memiliki icon gembok (mdi-lock). Input type password berwarna teal dengan varian outline.
Selamat mengerjakan.
Karya ini GRATIS! Tapi kamu boleh kok kasih tip biar kreator hepi 🥰