Input Component
CSS-only Tailwind CSS input with primary, secondary, accent, and semantic color variants. Sizes xs–xl, prefix and suffix addon slots, ghost style. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
Komponen masukan menangkap data pengguna melalui kolom teks, email, kata sandi, dan jenis masukan lainnya. Sistem masukan Frutjam menyediakan kontrol formulir HTML semantik dengan gaya Tailwind CSS untuk berbagai ukuran, warna, dan status validasi. Dirancang untuk aksesibilitas dan perilaku responsif, masukan terintegrasi secara mulus dengan pustaka dan kerangka validasi formulir.
Hanya CSS, tidak diperlukan JavaScript. WCAG AA dapat diakses dan tidak memiliki kerangka kerja — bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
| Kelas | Jenis | Keterangan |
|---|---|---|
| input | Basis | Bidang masukan teks bergaya |
| input-outline | Gaya | Isian transparan dengan batas yang terlihat |
| input-soft | Gaya | Latar belakang berwarna teredam |
| input-ghost | Gaya | Tidak ada batas yang terlihat sampai fokus |
| input-dashed | Gaya | Gaya perbatasan putus-putus |
| input-square | Gaya | Tidak ada radius perbatasan |
| input-disabled | Pengubah | Tampilan non-input untuk elemen non-input |
| input-xs | Ukuran | Sangat kecil |
| input-sm | Ukuran | Kecil |
| input-md | Ukuran | Sedang (standar) |
| input-lg | Ukuran | Besar |
| input-xl | Ukuran | Ekstra besar |
| input-2xl | Ukuran | 2× ekstra besar |
| input-primary | Warna | Batas warna tema utama |
| input-secondary | Warna | Batas warna tema sekunder |
| input-accent | Warna | Batas warna tema aksen |
| input-neutral | Warna | Batas warna tema netral |
| input-info | Warna | Batas warna semantik info |
| input-success | Warna | Perbatasan warna semantik sukses |
| input-warning | Warna | Batas warna semantik peringatan |
| input-error | Warna | Batas warna semantik salah |
Penggunaan Dasar
<input type="text" placeholder="Enter your text here" class="input"> |
<input type="text" placeholder="Enter your text here" className="input"> |
Ukuran Masukan
1 2 3 4 5 6 | <input type="text" class="input input-xs" placeholder="Xsmall"> <input type="text" class="input input-sm" placeholder="Small"> <input type="text" class="input input-md" placeholder="Medium"> <input type="text" class="input input-lg" placeholder="Large"> <input type="text" class="input input-xl" placeholder="Xlarge"> <input type="text" class="input input-2xl" placeholder="2XLarge"> |
Warna Masukan
1 2 3 4 5 6 7 8 9 | <input type="text" class="input" placeholder="Default"> <input type="text" class="input input-primary" placeholder="Primary"> <input type="text" class="input input-secondary" placeholder="Secondary"> <input type="text" class="input input-accent" placeholder="Accent"> <input type="text" class="input input-neutral" placeholder="Neutral"> <input type="text" class="input input-info" placeholder="Info"> <input type="text" class="input input-success" placeholder="Success"> <input type="text" class="input input-warning" placeholder="Warning"> <input type="text" class="input input-error" placeholder="Error"> |
Gaya Masukan
1 2 3 4 5 | <input type="text" class="input" placeholder="Default"> <input type="text" class="input input-outline" placeholder="Outline"> <input type="text" class="input input-soft" placeholder="Soft"> <input type="text" class="input input-dashed" placeholder="Dashed"> <input type="text" class="input input-ghost" placeholder="Ghost"> |
Kotak Masukan
Gunakan input-square untuk input karakter tunggal dengan lebar tetap seperti bidang OTP atau PIN.
1 2 3 4 | <input type="text" class="input input-square input-xs" maxlength="1" placeholder="0"> <input type="text" class="input input-square input-sm" maxlength="1" placeholder="0"> <input type="text" class="input input-square input-md" maxlength="1" placeholder="0"> <input type="text" class="input input-square input-lg" maxlength="1" placeholder="0"> |
Masukan Dinonaktifkan
1 2 | <input type="text" class="input" placeholder="Enabled input"> <input type="text" class="input input-disabled" placeholder="Disabled input" disabled> |
Masukan dengan Label
1 2 3 4 5 6 7 8 9 | <label> <span>Email address</span> <input type="email" class="input input-outline w-full" placeholder="you@example.com"> </label> <label> <span>Password</span> <input type="password" class="input input-outline input-primary w-full" placeholder="Enter password"> </label> |