Input Tailwind CSS khusus CSS dengan varian warna primer, sekunder, aksen, dan semantik. Ukuran xs-xl, slot tambahan awalan dan akhiran, gaya hantu. WCAG AA dapat diakses, bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.
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> |
Using Claude Code, Cursor, or another AI editor?
Cherry MCP memberi editor AI Anda nama dan struktur kelas Masukan yang tepat sesuai permintaan. Tidak ada lagi kelas berhalusinasi.