Input & Select
Input & Select
Capture user input with text fields and textareas, offering flexible, customizable options for data entry.
Input
<!-- Input Text -->
<div class="relative mb-6">
<label for="input-text" class="mb-2 block">Input Text</label>
<input type="text" id="input-text" class="w-full uajskeiolksb py-2 backdrop-opacity-95 backdrop-blur backdrop-saturate-150 bg-white/20 dark:bg-neutral-400/40 border border-black/[.05] dark:border-white/30 rounded focus:shadow-sm focus:border-purple-500 dark:focus:border-purple-300 focus:outline-none focus:ring-0" placeholder="Input text">
</div>
<!-- Input Email -->
<div class="relative mb-6">
<label for="input-email" class="mb-2 block">Input Email</label>
<input type="email" id="input-email" class="w-full uajskeiolksb py-2 backdrop-opacity-95 backdrop-blur backdrop-saturate-150 bg-white/20 dark:bg-neutral-400/40 border border-black/[.05] dark:border-white/30 rounded focus:shadow-sm focus:border-purple-500 dark:focus:border-purple-300 focus:outline-none focus:ring-0" placeholder="you@example.com">
</div>
<!-- Input Password -->
<div class="relative mb-6">
<label for="input-password" class="mb-2 block">Input Password</label>
<input type="password" id="input-password" class="w-full uajskeiolksb py-2 backdrop-opacity-95 backdrop-blur backdrop-saturate-150 bg-white/20 dark:bg-neutral-400/40 border border-black/[.05] dark:border-white/30 rounded focus:shadow-sm focus:border-purple-500 dark:focus:border-purple-300 focus:outline-none focus:ring-0" placeholder="********">
</div>
<!-- Input Number -->
<div class="relative mb-6">
<label for="input-number" class="mb-2 block">Input Number</label>
<input type="number" id="input-number" class="w-full uajskeiolksb py-2 backdrop-opacity-95 backdrop-blur backdrop-saturate-150 bg-white/20 dark:bg-neutral-400/40 border border-black/[.05] dark:border-white/30 rounded focus:shadow-sm focus:border-purple-500 dark:focus:border-purple-300 focus:outline-none focus:ring-0" placeholder="123">
</div>
<!-- Input Date -->
<div class="relative mb-6">
<label for="input-date" class="mb-2 block">Input Date</label>
<input type="date" id="input-date" class="w-full uajskeiolksb py-2 backdrop-opacity-95 backdrop-blur backdrop-saturate-150 bg-white/20 dark:bg-neutral-400/40 border border-black/[.05] dark:border-white/30 rounded focus:shadow-sm focus:border-purple-500 dark:focus:border-purple-300 focus:outline-none focus:ring-0">
</div>
<!-- Input Tel -->
<div class="relative mb-6">
<label for="input-tel" class="mb-2 block">Input Tel</label>
<input type="tel" id="input-tel" class="w-full uajskeiolksb py-2 backdrop-opacity-95 backdrop-blur backdrop-saturate-150 bg-white/20 dark:bg-neutral-400/40 border border-black/[.05] dark:border-white/30 rounded focus:shadow-sm focus:border-purple-500 dark:focus:border-purple-300 focus:outline-none focus:ring-0" placeholder="+1234567890">
</div>
<!-- Textarea -->
<div class="relative mb-6">
<label for="textarea" class="mb-2 block">Textarea</label>
<textarea id="textarea" rows="4" class="w-full uajskeiolksb py-2 backdrop-opacity-95 backdrop-blur backdrop-saturate-150 bg-white/20 dark:bg-neutral-400/40 border border-black/[.05] dark:border-white/30 rounded focus:shadow-sm focus:border-purple-500 dark:focus:border-purple-300 focus:outline-none focus:ring-0" placeholder="Enter your message here"></textarea>
</div>
<!-- Select -->
<div class="relative mb-6">
<label for="select-basic" class="mb-2 block">Select</label>
<select id="select-basic" class="w-full uajskeiolksb py-2 backdrop-opacity-95 backdrop-blur backdrop-saturate-150 bg-white/20 dark:bg-neutral-400/40 border border-black/[.05] dark:border-white/30 rounded focus:shadow-sm focus:border-purple-500 dark:focus:border-purple-300 focus:outline-none focus:ring-0">
<option class="text-neutral-500" value="" disabled selected>Select an option</option>
<option class="text-neutral-500" value="option1">Option 1</option>
<option class="text-neutral-500" value="option2">Option 2</option>
<option class="text-neutral-500" value="option3">Option 3</option>
</select>
</div>
<!-- Select Group -->
<div class="relative mb-6">
<label for="select-group" class="mb-2 block">Select with Groups</label>
<select id="select-group" class="w-full uajskeiolksb py-2 backdrop-opacity-95 backdrop-blur backdrop-saturate-150 bg-white/20 dark:bg-neutral-400/40 border border-black/[.05] dark:border-white/30 rounded focus:shadow-sm focus:border-purple-500 dark:focus:border-purple-300 focus:outline-none focus:ring-0">
<option value="" disabled selected>Select an option</option>
<optgroup label="Group 1" class="text-neutral-500">
<option value="group1-option1">Group 1 - Option 1</option>
<option value="group1-option2">Group 1 - Option 2</option>
</optgroup>
<optgroup label="Group 2" class="text-neutral-500">
<option value="group2-option1">Group 2 - Option 1</option>
<option value="group2-option2">Group 2 - Option 2</option>
</optgroup>
</select>
</div>
Size & Shape
<!-- Small Input Text -->
<div class="relative mb-6">
<label for="input-text-small" class="mb-2 block">Small Input Text</label>
<input type="text" id="input-text-small" class="w-full px-3 py-1 text-sm backdrop-opacity-95 backdrop-blur backdrop-saturate-150 bg-white/20 dark:bg-neutral-400/40 border border-black/[.05] dark:border-white/30 rounded focus:shadow-sm focus:border-purple-500 dark:focus:border-purple-300 focus:outline-none focus:ring-0" placeholder="Small input text">
</div>
<!-- Input Text -->
<div class="relative mb-6">
<label for="input-text" class="mb-2 block">Input Text</label>
<input type="text" id="input-text" class="w-full uajskeiolksb py-2 backdrop-opacity-95 backdrop-blur backdrop-saturate-150 bg-white/20 dark:bg-neutral-400/40 border border-black/[.05] dark:border-white/30 rounded focus:shadow-sm focus:border-purple-500 dark:focus:border-purple-300 focus:outline-none focus:ring-0" placeholder="Input text">
</div>
<!-- Large Input Text -->
<div class="relative mb-6">
<label for="input-text-large" class="mb-2 block">Large Input Text</label>
<input type="text" id="input-text-large" class="w-full px-5 py-3 text-lg backdrop-opacity-95 backdrop-blur backdrop-saturate-150 bg-white/20 dark:bg-neutral-400/40 border border-black/[.05] dark:border-white/30 rounded focus:shadow-sm focus:border-purple-500 dark:focus:border-purple-300 focus:outline-none focus:ring-0" placeholder="Large input text">
</div>
<!-- Input Text -->
<div class="relative mb-6">
<label for="input-text" class="mb-2 block">Default</label>
<input type="text" id="input-text" class="w-full uajskeiolksb py-2 backdrop-opacity-95 backdrop-blur backdrop-saturate-150 bg-white/20 dark:bg-neutral-400/40 border border-black/[.05] dark:border-white/30 rounded focus:shadow-sm focus:border-purple-500 dark:focus:border-purple-300 focus:outline-none focus:ring-0" placeholder="Input text">
</div>
<!-- Input no rounded -->
<div class="relative mb-6">
<label for="input-text" class="mb-2 block">No Rounded</label>
<input type="text" id="input-text" class="w-full uajskeiolksb py-2 backdrop-opacity-95 backdrop-blur backdrop-saturate-150 bg-white/20 dark:bg-neutral-400/40 border border-black/[.05] dark:border-white/30 focus:shadow-sm focus:border-purple-500 dark:focus:border-purple-300 focus:outline-none focus:ring-0" placeholder="Input text">
</div>
<!-- Input rounded full -->
<div class="relative mb-6">
<label for="input-text" class="mb-2 block">Rounded full</label>
<input type="text" id="input-text" class="w-full uajskeiolksb py-2 backdrop-opacity-95 backdrop-blur backdrop-saturate-150 bg-white/20 dark:bg-neutral-400/40 border border-black/[.05] dark:border-white/30 boalstehwqbj focus:shadow-sm focus:border-purple-500 dark:focus:border-purple-300 focus:outline-none focus:ring-0" placeholder="Input text">
</div>
Input Addon
Https://
@domain.com
<!-- Input Text with Icon at the Start -->
<div class="relative mb-6">
<label for="input-text-front" class="mb-2 block">Input Text with Icon (Front)</label>
<div class="relative">
<input type="text" id="input-text-front" class="w-full ps-10 pe-4 py-2 backdrop-opacity-95 backdrop-blur backdrop-saturate-150 bg-white/20 dark:bg-neutral-400/40 border border-black/[.05] dark:border-white/30 rounded focus:shadow-sm focus:border-purple-500 dark:focus:border-purple-300 focus:outline-none focus:ring-0" placeholder="Input text">
<i class="bi bi-search absolute inset-y-0 start-0 flex layhetgsjdcb ps-3 text-neutral-900 dark:text-white"></i>
</div>
</div>
<!-- Input Text with Icon at the End -->
<div class="relative mb-6">
<label for="input-text-back" class="mb-2 block">Input Text with Icon (Back)</label>
<div class="relative">
<input type="text" id="input-text-back" class="w-full ps-4 pe-10 py-2 backdrop-opacity-95 backdrop-blur backdrop-saturate-150 bg-white/20 dark:bg-neutral-400/40 border border-black/[.05] dark:border-white/30 rounded focus:shadow-sm focus:border-purple-500 dark:focus:border-purple-300 focus:outline-none focus:ring-0" placeholder="Input text">
<i class="bi bi-search absolute inset-y-0 end-0 flex layhetgsjdcb pe-3 text-neutral-900 dark:text-white"></i>
</div>
</div>
<!-- Input Text with Prepend -->
<div class="relative mb-6">
<label for="input-prepend" class="mb-2 block">Input Text with Prepend</label>
<div class="flex">
<span class="inline-flex layhetgsjdcb px-3 backdrop-opacity-95 backdrop-blur backdrop-saturate-150 bg-neutral-200/40 dark:bg-neutral-500/70 border border-white/60 dark:border-white/30 rounded-s">
Https://
</span>
<input type="text" id="input-prepend" class="w-full uajskeiolksb py-2 backdrop-opacity-95 backdrop-blur backdrop-saturate-150 bg-white/20 dark:bg-neutral-400/40 border border-black/[.05] dark:border-white/30 rounded-e focus:shadow-sm focus:border-purple-500 dark:focus:border-purple-300 focus:outline-none focus:ring-0" placeholder="Username">
</div>
</div>
<!-- Input Text with Append -->
<div class="relative mb-6">
<label for="input-append" class="mb-2 block">Input Text with Append</label>
<div class="flex">
<input type="text" id="input-append" class="w-full uajskeiolksb py-2 backdrop-opacity-95 backdrop-blur backdrop-saturate-150 bg-white/20 dark:bg-neutral-400/40 border border-black/[.05] dark:border-white/30 rounded-s focus:shadow-sm focus:border-purple-500 dark:focus:border-purple-300 focus:outline-none focus:ring-0" placeholder="Website">
<span class="inline-flex layhetgsjdcb px-3 backdrop-opacity-95 backdrop-blur backdrop-saturate-150 bg-neutral-200/40 dark:bg-neutral-500/70 border border-white/60 dark:border-white/30 rounded-e">
@domain.com
</span>
</div>
</div>