inputs #01
Input sizes
1
Color options
Customize your colors.
<div class="flex justify-center w-full px-12 py-48">
<div class="w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4">
<div class="w-full">
<div class="flex justify-between items-baseline mb-1">
<label for="input-xs" class="font-medium text-base-500 text-xs"
>Extra Small Input</label
>
</div>
<div
class="relative z-0 focus-within:z-10"
x-data="{ value: '', showPassword: false }"
>
<input
placeholder="Extra small input"
id="input-xs"
name="input-xs"
type="text"
x-model="value"
class="w-full block transition duration-300 ease-in-out leading-tight align-middle focus:z-10 h-8 px-4 py-2 text-xs rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md bg-white border border-transparent text-base-500 ring-1 ring-base-200 placeholder-base-400 focus:border-base-300 focus:outline-none focus:ring-accent-500 focus:ring-offset-2 focus:ring-2 shadow-sm"
/>
<div class="absolute inset-y-0 right-0 flex items-center pr-3 gap-2">
<button
x-show="value"
type="button"
@click="value = ''"
class="text-base-400 hover:text-base-600 focus:outline-none"
aria-label="Clear input"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler-wave-x size-4 text-base-500"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M18 6l-12 12"></path>
<path d="M6 6l12 12"></path>
</svg>
</button>
</div>
</div>
</div>
<div class="w-full">
<div class="flex justify-between items-baseline mb-1">
<label for="input-sm" class="font-medium text-base-500 text-xs"
>Small Input</label
>
</div>
<div
class="relative z-0 focus-within:z-10"
x-data="{ value: '', showPassword: false }"
>
<input
placeholder="Small input"
id="input-sm"
name="input-sm"
type="text"
x-model="value"
class="w-full block transition duration-300 ease-in-out leading-tight align-middle focus:z-10 h-9 px-4 py-2 text-xs rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md bg-white border border-transparent text-base-500 ring-1 ring-base-200 placeholder-base-400 focus:border-base-300 focus:outline-none focus:ring-accent-500 focus:ring-offset-2 focus:ring-2 shadow-sm"
/>
<div class="absolute inset-y-0 right-0 flex items-center pr-3 gap-2">
<button
x-show="value"
type="button"
@click="value = ''"
class="text-base-400 hover:text-base-600 focus:outline-none"
aria-label="Clear input"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler-wave-x size-4 text-base-500"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M18 6l-12 12"></path>
<path d="M6 6l12 12"></path>
</svg>
</button>
</div>
</div>
</div>
<div class="w-full">
<div class="flex justify-between items-baseline mb-1">
<label for="input-base" class="font-medium text-base-500 text-sm"
>Base Input (Default)</label
>
</div>
<div
class="relative z-0 focus-within:z-10"
x-data="{ value: '', showPassword: false }"
>
<input
placeholder="Base input (default size)"
id="input-base"
name="input-base"
type="text"
x-model="value"
class="w-full block transition duration-300 ease-in-out leading-tight align-middle focus:z-10 h-10 px-4 py-2 text-sm rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md bg-white border border-transparent text-base-500 ring-1 ring-base-200 placeholder-base-400 focus:border-base-300 focus:outline-none focus:ring-accent-500 focus:ring-offset-2 focus:ring-2 shadow-sm"
/>
<div class="absolute inset-y-0 right-0 flex items-center pr-3 gap-2">
<button
x-show="value"
type="button"
@click="value = ''"
class="text-base-400 hover:text-base-600 focus:outline-none"
aria-label="Clear input"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler-wave-x size-4 text-base-500"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M18 6l-12 12"></path>
<path d="M6 6l12 12"></path>
</svg>
</button>
</div>
</div>
</div>
<div class="w-full">
<div class="flex justify-between items-baseline mb-1">
<label for="input-lg" class="font-medium text-base-500 text-base"
>Large Input</label
>
</div>
<div
class="relative z-0 focus-within:z-10"
x-data="{ value: '', showPassword: false }"
>
<input
placeholder="Large input"
id="input-lg"
name="input-lg"
type="text"
x-model="value"
class="w-full block transition duration-300 ease-in-out leading-tight align-middle focus:z-10 h-12 px-4 py-2.5 text-base rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md bg-white border border-transparent text-base-500 ring-1 ring-base-200 placeholder-base-400 focus:border-base-300 focus:outline-none focus:ring-accent-500 focus:ring-offset-2 focus:ring-2 shadow-sm"
/>
<div class="absolute inset-y-0 right-0 flex items-center pr-3 gap-2">
<button
x-show="value"
type="button"
@click="value = ''"
class="text-base-400 hover:text-base-600 focus:outline-none"
aria-label="Clear input"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler-wave-x size-4 text-base-500"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M18 6l-12 12"></path>
<path d="M6 6l12 12"></path>
</svg>
</button>
</div>
</div>
</div>
<div class="w-full">
<div class="flex justify-between items-baseline mb-1">
<label for="input-xl" class="font-medium text-base-500 text-lg"
>Extra Large Input</label
>
</div>
<div
class="relative z-0 focus-within:z-10"
x-data="{ value: '', showPassword: false }"
>
<input
placeholder="Extra large input"
id="input-xl"
name="input-xl"
type="text"
x-model="value"
class="w-full block transition duration-300 ease-in-out leading-tight align-middle focus:z-10 h-14 px-5 py-3 text-lg rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md bg-white border border-transparent text-base-500 ring-1 ring-base-200 placeholder-base-400 focus:border-base-300 focus:outline-none focus:ring-accent-500 focus:ring-offset-2 focus:ring-2 shadow-sm"
/>
<div class="absolute inset-y-0 right-0 flex items-center pr-3 gap-2">
<button
x-show="value"
type="button"
@click="value = ''"
class="text-base-400 hover:text-base-600 focus:outline-none"
aria-label="Clear input"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler-wave-x size-4 text-base-500"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M18 6l-12 12"></path>
<path d="M6 6l12 12"></path>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>