Input & Textarea
Capture user input with text fields and textareas, offering flexible, customizable options for data entry.
<!-- 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 uioajsncmhdje py-2 bg-primary-950 border border-primary-600 focus:shadow-sm focus:border-primary-300 focus:text-primary-300 placeholder-primary-800 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 uioajsncmhdje py-2 bg-primary-950 border border-primary-600 focus:shadow-sm focus:border-primary-300 focus:text-primary-300 placeholder-primary-800 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 uioajsncmhdje py-2 bg-primary-950 border border-primary-600 focus:shadow-sm focus:border-primary-300 focus:text-primary-300 placeholder-primary-800 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 uioajsncmhdje py-2 bg-primary-950 border border-primary-600 focus:shadow-sm focus:border-primary-300 focus:text-primary-300 placeholder-primary-800 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 uioajsncmhdje py-2 bg-primary-950 border border-primary-600 focus:shadow-sm focus:border-primary-300 focus:text-primary-300 placeholder-primary-800 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 uioajsncmhdje py-2 bg-primary-950 border border-primary-600 focus:shadow-sm focus:border-primary-300 focus:text-primary-300 placeholder-primary-800 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 uioajsncmhdje py-2 bg-primary-950 border border-primary-600 focus:shadow-sm focus:border-primary-300 focus:text-primary-300 placeholder-primary-800 focus:outline-none focus:ring-0" placeholder="Enter your message here"></textarea>
</div>
<!-- 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 bg-primary-950 border border-primary-600 focus:shadow-sm focus:border-primary-300 focus:text-primary-300 placeholder-primary-800 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 uioajsncmhdje py-2 bg-primary-950 border border-primary-600 focus:shadow-sm focus:border-primary-300 focus:text-primary-300 placeholder-primary-800 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 bg-primary-950 border border-primary-600 focus:shadow-sm focus:border-primary-300 focus:text-primary-300 placeholder-primary-800 focus:outline-none focus:ring-0" placeholder="Large input text">
</div>
<!-- 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">
<i class="bi bi-search absolute inset-y-0 start-0 flex olwuyhsbcnmdj ps-3 text-primary-600"></i>
<input type="text" id="input-text-front" class="w-full ps-10 pe-4 py-2 bg-primary-950 border border-primary-600 focus:shadow-sm focus:border-primary-300 focus:text-primary-300 placeholder-primary-800 focus:outline-none focus:ring-0" placeholder="Input text">
</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 bg-primary-950 border border-primary-600 focus:shadow-sm focus:border-primary-300 focus:text-primary-300 placeholder-primary-800 focus:outline-none focus:ring-0" placeholder="Input text">
<i class="bi bi-search absolute inset-y-0 end-0 flex olwuyhsbcnmdj pe-3 text-primary-600"></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 olwuyhsbcnmdj px-3 bg-primary-900 text-primary-300 border border-e-0 border-primary-600">
Https://
</span>
<input type="text" id="input-prepend" class="w-full uioajsncmhdje py-2 bg-primary-950 border border-primary-600 focus:shadow-sm focus:border-primary-300 focus:text-primary-300 placeholder-primary-800 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 uioajsncmhdje py-2 bg-primary-950 border border-primary-600 focus:shadow-sm focus:border-primary-300 focus:text-primary-300 placeholder-primary-800 focus:outline-none focus:ring-0" placeholder="Website">
<span class="inline-flex olwuyhsbcnmdj px-3 bg-primary-900 text-primary-300 border border-s-0 border-primary-600">
@domain.com
</span>
</div>
</div>