Summer Sale – Use code oxbow20 at checkout for a 20% discount.

input groups

1
<div class="w-full">
  <div class="w-full">
    <div class="flex justify-between items-baseline mb-1">
      <label for="Domain" class="font-medium text-zinc-500 text-sm"
        >Domain (Prefix)</label
      >
    </div>
    <div class="relative z-0 focus-within:z-10">
      <span
        class="absolute inset-y-0 left-0 flex items-center pl-3 select-none text-zinc-400"
        >https://</span
      ><input
        placeholder="yourdomain.com"
        id="Domain"
        name="Domain"
        type="text"
        class="w-full block transition duration-300 ease-in-out leading-tight align-middle focus:z-10 pl-20 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-zinc-500 ring-1 ring-zinc-200 placeholder-zinc-400 focus:border-blue-500 focus:ring-blue-100 focus:ring-2 focus:outline-none shadow-sm"
      />
    </div>
  </div>
</div>

Input with add-on

Block input group

Address input group

Search input group

Quick search input group

OTP group

Quick search input group

Search input group

Quantity input group

Value input group