Tailwind CSS Form - Nuanxa
Komponen form digunakan untuk menampilkan formulir interaktif. Komponen ini mendukung berbagai gaya dan dapat dengan mudah dikustomisasi.
Default form
Form input standar dengan label dan gaya dasar.
<form>
<!-- Email -->
<div class="mb-5">
<label
for="email"
class="block mb-2 text-sm text-gray-500 dark:text-gray-400"
>
Email
</label>
<div class="autofill-light dark:autofill-dark">
<input
type="email"
id="email"
required
placeholder="Email"
class="w-full py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-1 focus:ring-blue-200 focus:border-blue-200"
/>
</div>
</div>
<!-- Password -->
<div class="mb-5">
<label
for="password"
class="block mb-2 text-sm text-gray-500 dark:text-gray-400"
>
Password
</label>
<div class="relative autofill-light dark:autofill-dark">
<input
type="password"
id="password"
required
placeholder="Password"
class="w-full py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-1 focus:ring-blue-200 focus:border-blue-200"
/>
<i
data-toggle="password"
data-target="password"
class="fas fa-eye-slash absolute right-2 top-1/2 -translate-y-1/2 cursor-pointer text-gray-400 dark:text-gray-500 hover:text-gray-600 hover:dark:text-gray-300"
></i>
</div>
</div>
<div
class="flex items-center justify-between text-sm text-gray-600 dark:text-gray-400 mb-5"
>
<label class="flex items-center gap-2">
<input
type="checkbox"
class="h-4 w-4 rounded border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 focus:ring-2 focus:ring-blue-200 focus:ring-offset-0"
/>
Remember me
</label>
<a
href="forgot-password.html"
class="text-blue-600 dark:text-blue-400 hover:underline"
>Forgot password?</a
>
</div>
<button
class="px-3 py-2 w-full text-sm font-semibold rounded-md text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:text-blue-50 dark:hover:bg-blue-400 transition"
>
Login
</button>
</form>
Icon Form
Form input dengan ikon di bagian awal untuk konteks visual.
<div
class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 shadow-md shadow-blue-200 dark:shadow-gray-700 rounded-2xl p-6"
>
<p class="mb-8 text-base font-normal uppercase">With Icon</p>
<form>
<!-- Email -->
<div class="mb-5">
<label
for="email"
class="block mb-2 text-sm text-gray-500 dark:text-gray-400"
>
Email
</label>
<div class="relative autofill-light dark:autofill-dark">
<i
class="fas fa-envelope absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 dark:text-gray-500"
></i>
<input
type="email"
id="email"
required
placeholder="Email"
class="w-full pl-10 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-1 focus:ring-blue-200 focus:border-blue-200"
/>
</div>
</div>
<!-- Password -->
<div class="mb-5">
<label
for="password"
class="block mb-2 text-sm text-gray-500 dark:text-gray-400"
>
Password
</label>
<div class="relative autofill-light dark:autofill-dark">
<i
class="fas fa-key absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 dark:text-gray-500"
></i>
<input
type="password"
id="password2"
required
placeholder="Password"
class="w-full pl-10 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-1 focus:ring-blue-200 focus:border-blue-200"
/>
<i
data-toggle="password"
data-target="password2"
class="fas fa-eye-slash absolute right-2 top-1/2 -translate-y-1/2 cursor-pointer text-gray-400 dark:text-gray-500 hover:text-gray-600 hover:dark:text-gray-300"
></i>
</div>
</div>
<div
class="flex items-center justify-between text-sm text-gray-600 dark:text-gray-400 mb-5"
>
<label class="flex items-center gap-2">
<input
type="checkbox"
class="h-4 w-4 rounded border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 focus:ring-2 focus:ring-blue-200 focus:ring-offset-0"
/>
Remember me
</label>
<a
href="forgot-password.html"
class="text-blue-600 dark:text-blue-400 hover:underline"
>Forgot password?</a
>
</div>
<button
class="px-3 py-2 w-full text-sm font-semibold rounded-md text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:text-blue-50 dark:hover:bg-blue-400 transition"
>
Login
</button>
</form>
</div>
Float label
Input dengan label melayang yang bergerak saat fokus atau input.
<div
class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 shadow-md shadow-blue-200 dark:shadow-gray-700 rounded-2xl p-6"
>
<p class="mb-8 text-base font-bold uppercase text-center">Login</p>
<form>
<!-- Email -->
<div class="mb-5 relative autofill-light dark:autofill-dark">
<input
type="email"
id="email"
required
placeholder=" "
class="peer w-full py-2 px-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-1 focus:ring-blue-200 focus:border-blue-200"
/>
<label
for="email"
class="absolute transition-[top,transform,font-size] duration-300 ease-out left-2 top-2 px-1 text-gray-500 dark:text-gray-400 pointer-events-none peer-placeholder-shown:top-2 peer-placeholder-shown:text-base peer-focus:-top-3 peer-focus:text-sm peer-[&:not(:placeholder-shown)]:-top-3 peer-[&:not(:placeholder-shown)]:text-sm peer-focus:left-2 peer-[&:not(:placeholder-shown)]:left-2 bg-white dark:bg-gray-800"
>
Email
</label>
</div>
<!-- Password -->
<div class="mb-5 relative autofill-light dark:autofill-dark">
<input
type="password"
id="password3"
required
placeholder=" "
class="peer w-full py-2 px-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-1 focus:ring-blue-200 focus:border-blue-200"
/>
<i
data-toggle="password"
data-target="password3"
class="fas fa-eye-slash absolute right-2 top-1/2 -translate-y-1/2 cursor-pointer text-gray-400 dark:text-gray-500 hover:text-gray-600 hover:dark:text-gray-300"
></i>
<label
for="password"
class="absolute transition-[top,transform,font-size] duration-300 ease-out left-2 top-2 px-1 text-gray-500 dark:text-gray-400 pointer-events-none peer-placeholder-shown:top-2 peer-placeholder-shown:text-base peer-focus:-top-3 peer-focus:text-sm peer-[&:not(:placeholder-shown)]:-top-3 peer-[&:not(:placeholder-shown)]:text-sm peer-focus:left-2 peer-[&:not(:placeholder-shown)]:left-2 bg-white dark:bg-gray-800"
>
Password
</label>
</div>
<div
class="flex items-center justify-between text-sm text-gray-600 dark:text-gray-400 mb-5"
>
<label class="flex items-center gap-2">
<input
type="checkbox"
class="h-4 w-4 rounded border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 focus:ring-2 focus:ring-blue-200 focus:ring-offset-0"
/>
Remember me
</label>
<a
href="forgot-password.html"
class="text-blue-600 dark:text-blue-400 hover:underline"
>Forgot password?</a
>
</div>
<button
class="px-3 py-2 w-full text-sm font-semibold rounded-md text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:text-blue-50 dark:hover:bg-blue-400 transition"
>
Login
</button>
</form>
</div>
Underline Form
Input dengan gaya garis bawah.
<div
class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 shadow-md shadow-blue-200 dark:shadow-gray-700 rounded-2xl p-6"
>
<p class="mb-8 text-base font-bold uppercase text-center">Login</p>
<form>
<!-- EMAIL -->
<div class="mb-6 relative autofill-light dark:autofill-dark">
<input
type="email"
id="email"
required
placeholder=" "
class="peer w-full pl-0 py-2 border-0 border-b border-gray-300 dark:border-gray-600 bg-transparent text-gray-900 dark:text-gray-100 focus:outline-none focus:border-blue-500 focus:ring-0"
/>
<label
for="email"
class="absolute left-0 top-2 text-gray-500 dark:text-gray-400 transition-[top,transform,font-size] duration-300 ease-out pointer-events-none peer-placeholder-shown:top-2 peer-placeholder-shown:text-base peer-focus:-top-3 peer-focus:text-sm peer-[&:not(:placeholder-shown)]:-top-3 peer-[&:not(:placeholder-shown)]:text-sm peer-focus:left-0 peer-[&:not(:placeholder-shown)]:left-0 bg-white dark:bg-gray-800"
>
Email
</label>
</div>
<!-- PASSWORD -->
<div class="mb-6 relative autofill-light dark:autofill-dark">
<input
type="password"
id="password5"
required
placeholder=" "
class="peer w-full pl-0 py-2 border-0 border-b border-gray-300 dark:border-gray-600 bg-transparent text-gray-900 dark:text-gray-100 focus:outline-none focus:border-blue-500 focus:ring-0"
/>
<i
data-toggle="password"
data-target="password5"
class="fas fa-eye-slash absolute right-0 top-1/2 -translate-y-1/2 cursor-pointer text-gray-400 dark:text-gray-500 hover:text-gray-600 hover:dark:text-gray-300"
></i>
<label
for="password5"
class="absolute left-0 top-2 text-gray-500 dark:text-gray-400 transition-[top,transform,font-size] duration-300 ease-out pointer-events-none peer-placeholder-shown:top-2 peer-placeholder-shown:text-base peer-focus:-top-3 peer-focus:text-sm peer-[&:not(:placeholder-shown)]:-top-3 peer-[&:not(:placeholder-shown)]:text-sm peer-focus:left-0 peer-[&:not(:placeholder-shown)]:left-0 bg-white dark:bg-gray-800"
>
Password
</label>
</div>
<!-- OPTIONS -->
<div
class="flex items-center justify-between text-sm text-gray-600 dark:text-gray-400 mb-6"
>
<label class="flex items-center gap-2">
<input
type="checkbox"
class="h-4 w-4 rounded border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-blue-200 focus:ring-offset-0"
/>
Remember me
</label>
<a
href="forgot-password.html"
class="text-blue-600 dark:text-blue-400 hover:underline"
>
Forgot password?
</a>
</div>
<!-- BUTTON -->
<button
class="px-3 py-2 w-full text-sm font-semibold rounded-md text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400 transition"
>
Login
</button>
</form>
</div>
Disabled Input
Field input yang dinonaktifkan dan tidak dapat digunakan.
<form class="space-y-3">
<input
type="email"
id="email"
required
placeholder="Email"
disabled
class="w-full py-2 px-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none"
/>
<input
type="email"
id="email"
required
placeholder="Email"
disabled
class="w-full py-2 px-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400 focus:outline-none"
/>
</form>
Textarea
Field input multiline untuk teks yang lebih panjang.
<form>
<div class="autofill-light dark:autofill-dark">
<textarea
id="address"
required
placeholder="Address"
rows="4"
class="w-full py-2 px-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-1 focus:ring-blue-200 focus:border-blue-200"
></textarea>
</div>
</form>
Select Input
Field input dropdown untuk memilih opsi.
<form>
<div class="autofill-light dark:autofill-dark">
<select
id="role"
required
class="w-full py-2 px-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-1 focus:ring-blue-200 focus:border-blue-200"
>
<option value="" disabled selected>Select role</option>
<option value="admin">Admin</option>
<option value="user">User</option>
</select>
</div>
</form>
Checkbox
Field input untuk memilih satu atau lebih opsi.
<div class="space-y-2">
<label class="flex items-center gap-2 cursor-pointer">
<input
type="checkbox"
class="w-4 h-4 rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-blue-600 focus:ring-1 focus:ring-blue-200 focus:outline-none"
/>
<span class="text-gray-900 dark:text-gray-100">Remember me</span>
</label>
<label class="flex items-center gap-2 cursor-pointer">
<input
type="checkbox"
class="w-4 h-4 rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-blue-600 focus:ring-1 focus:ring-blue-200 focus:outline-none"
/>
<span class="text-gray-900 dark:text-gray-100">Subscribe to newsletter</span>
</label>
<label class="flex items-center gap-2 cursor-pointer">
<input
type="checkbox"
class="w-4 h-4 rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-blue-600 focus:ring-1 focus:ring-blue-200 focus:outline-none"
/>
<span class="text-gray-900 dark:text-gray-100">Accept terms and conditions</span>
</label>
</div>
Radio button
Field input untuk memilih satu opsi dari daftar.
<div class="space-y-2">
<label class="flex items-center gap-2 cursor-pointer">
<input
type="radio"
name="payment"
value="bank"
class="w-4 h-4 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-blue-600 focus:ring-1 focus:ring-blue-200 focus:outline-none"
/>
<span class="text-gray-900 dark:text-gray-100">Bank Transfer</span>
</label>
<label class="flex items-center gap-2 cursor-pointer">
<input
type="radio"
name="payment"
value="ewallet"
class="w-4 h-4 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-blue-600 focus:ring-1 focus:ring-blue-200 focus:outline-none"
/>
<span class="text-gray-900 dark:text-gray-100">E-Wallet</span>
</label>
<label class="flex items-center gap-2 cursor-pointer">
<input
type="radio"
name="payment"
value="cod"
class="w-4 h-4 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-blue-600 focus:ring-1 focus:ring-blue-200 focus:outline-none"
/>
<span class="text-gray-900 dark:text-gray-100">Cash on Delivery</span>
</label>
</div>
Search input
Field input untuk mencari konten.
<div class="relative autofill-light dark:autofill-dark">
<div class="flex">
<input
type="search"
id="search"
placeholder="Search..."
class="w-full h-10 px-3 text-sm leading-none rounded-l-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-1 focus:ring-blue-200 focus:border-blue-200"
/>
<button
aria-label="search"
class="h-10 px-4 text-sm leading-none rounded-r-lg bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400 transition flex items-center justify-center"
>
<span class="fas fa-search"></span>
</button>
</div>
</div>
<div class="relative autofill-light dark:autofill-dark">
<i
class="fas fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 dark:text-gray-500"
></i>
<input
type="search"
placeholder="Search..."
class="w-full pl-10 pr-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-blue-200 focus:border-blue-200"
/>
</div>
File input
Field input untuk mengunggah satu file.
<form>
<input
type="file"
class="w-full cursor-pointer rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 file:mr-3 file:py-1.5 file:px-3 file:rounded-l-lg file:border-0 file:bg-gray-200 hover:file:bg-gray-300 dark:file:bg-gray-600 dark:hover:file:bg-gray-700 file:cursor-pointer focus:outline-none focus:ring-1 focus:ring-blue-200 focus:border-blue-200"
/>
</form>
Multiple file input
Field input untuk mengunggah beberapa file.
<form>
<label
id="uploadArea"
for="upload-photo-product"
class="relative brightness-100 hover:brightness-90 cursor-pointer flex p-5 mb-5 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-2xl items-center justify-center overflow-hidden"
>
<div class="flex flex-col items-center pb-6 my-6 pointer-events-none">
<i class="fas fa-cloud-upload-alt fa-4x mb-5"></i>
<p id="total-upload" class="text-sm mb-2 text-gray-700 dark:text-gray-300">
No file selected
</p>
<p class="text-base mb-2 text-gray-900 dark:text-gray-100">
Drag & drop files here or click to upload
</p>
<p class="text-sm italic text-gray-600 dark:text-gray-400">
( JPG, PNG, WEBP • Max 200 KB per file )
</p>
</div>
<input
type="file"
id="upload-photo-product"
accept="image/jpeg,jpg,image/png,image/webp"
multiple
class="hidden"
/>
</label>
</form>
Toggle
Field input untuk mengubah nilai boolean.
<form>
<div class="autofill-light dark:autofill-dark">
<textarea
id="address"
required
placeholder="Address"
rows="4"
class="w-full py-2 px-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-1 focus:ring-blue-200 focus:border-blue-200"
></textarea>
</div>
</form>