Form Input Components: Taco Component Library

Input with button

<div class="relative flex justify-between shadow-md dark:shadow-zinc-900/50 border dark:border-gray-900 border-gray-200/50 items-center max-w-md w-full pl-4 ml-2 dark:text-gray-200 rounded-full bg-transparent">
    <input id="searchbar" type="search" class="placeholder:text-gray-500 placeholder:font-normal py-2.5 px-2 bg-transparent outline-none w-full" 
        placeholder="Enter email.." />
    <button class="bg-black dark:bg-zinc-50 text-white dark:text-black my-1 mr-1 hover:border-black focus-visible:outline-black/50 px-6 py-2 rounded-full border-[1.5px] border-transparent transition-colors duration-100 focus-visible:outline active:scale-[0.98]">
        Subscribe
    </button>
</div>

Input with floating label

<div class="relative max-w-sm w-full dark:text-gray-200/70 mb-8">
    <input id="email" type="email" class="peer border-gray-400 w-full dark:border-gray-200/60 dark:valid:text-white valid:text-black text-gray-800 focus-visible:outline-gray-600 border focus-visible:outline-2 focus-visible:outline dark:focus-visible:outline-gray-200/50 focus-visible:border-transparent py-2 px-3 rounded bg-transparent" />
    <!-- Change Background color of label to match with your site color -->
    <label for="email" class="bg-white dark:bg-black text-gray-800 dark:text-white -translate-y-4 dark:peer-focus:text-white peer-focus:font-semibold ml-2 h-fit px-1 w-fit transition-transform absolute inset-0" >
    Email
    </label>
</div>

Input with placeholder

<input id="email" type="email" class="placeholder:text-gray-500 placeholder:font-normal dark:text-white/80 border-gray-500 dark:border-gray-200/60 focus-visible:outline-gray-600 border focus-visible:outline-2 focus-visible:outline dark:focus-visible:outline-white/60 focus-visible:border-transparent py-2 px-3 rounded bg-transparent max-w-sm w-full" 
    placeholder="Email"/>

Input with label and placeholder

<div class="grid gap-1 max-w-sm w-full dark:text-gray-200">
    <label for="email" class="">Email</label>
    <input id="email" type="email" class="placeholder:text-gray-500 placeholder:font-normal border-gray-500 dark:border-gray-200/60 focus-visible:outline-gray-600 border focus-visible:outline-2 focus-visible:outline dark:focus-visible:outline-gray-200/50 focus-visible:border-transparent py-2 px-3 rounded bg-transparent" 
        placeholder="Email" />
    <p class="dark:text-gray-300/70 text-black/70">Enter email address</p>
</div>