Application toolkit - Input group

Easily extend inputs by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.

Sizes

Input groups stacked from small to large.

Open this sizes input group example in new window
Copy sizes input group code 
<div class="flex flex-col gap-3">
  <div>
    <div class="flex rounded-md shadow-sm">
      <span class="px-4 inline-flex items-center min-w-fit rounded-l-md border border-r-0 border-gray-200 bg-gray-50 text-sm text-gray-500 dark:bg-gray-700 dark:border-gray-700 dark:text-gray-400">Small</span>
      <input type="text" class="py-2 px-3 pr-11 block w-full border-gray-200 shadow-sm rounded-r-md text-sm focus:z-10 focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400">
    </div>
  </div>

  <div>
    <div class="flex rounded-md shadow-sm">
      <span class="px-4 inline-flex items-center min-w-fit rounded-l-md border border-r-0 border-gray-200 bg-gray-50 text-sm text-gray-500 dark:bg-gray-700 dark:border-gray-700 dark:text-gray-400">Default</span>
      <input type="text" class="py-3 px-4 pr-11 block w-full border-gray-200 shadow-sm rounded-r-md text-sm focus:z-10 focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400">
    </div>
  </div>

  <div>
    <div class="flex rounded-md shadow-sm">
      <span class="px-4 inline-flex items-center min-w-fit rounded-l-md border border-r-0 border-gray-200 bg-gray-50 text-sm text-gray-500 dark:bg-gray-700 dark:border-gray-700 dark:text-gray-400">Large</span>
      <input type="text" class="py-3 px-4 pr-11 block w-full border-gray-200 shadow-sm rounded-r-md text-sm focus:z-10 focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400 sm:p-5">
    </div>
  </div>
</div>
Close sizes input group code

Multiple inputs

Multiple stacked inputs.

Open this mutiple input group example in new window
Copy mutiple input group code 
<div class="flex flex-col gap-3">
  <div>
    <div class="sm:flex rounded-md shadow-sm">
      <span class="py-3 px-4 inline-flex items-center min-w-fit w-full border border-gray-200 bg-gray-50 text-sm text-gray-500 -mt-px -ml-px first:rounded-t-lg last:rounded-b-lg sm:w-auto sm:first:rounded-l-lg sm:mt-0 sm:first:ml-0 sm:first:rounded-tr-none sm:last:rounded-bl-none sm:last:rounded-r-lg dark:bg-gray-700 dark:border-gray-700 dark:text-gray-400">First and last name</span>
      <input type="text" class="py-3 px-4 pr-11 block w-full border-gray-200 shadow-sm -mt-px -ml-px first:rounded-t-lg last:rounded-b-lg sm:first:rounded-l-lg sm:mt-0 sm:first:ml-0 sm:first:rounded-tr-none sm:last:rounded-bl-none sm:last:rounded-r-lg text-sm relative focus:z-10 focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400">
      <input type="text" class="py-3 px-4 pr-11 block w-full border-gray-200 shadow-sm -mt-px -ml-px first:rounded-t-lg last:rounded-b-lg sm:first:rounded-l-lg sm:mt-0 sm:first:ml-0 sm:first:rounded-tr-none sm:last:rounded-bl-none sm:last:rounded-r-lg text-sm relative focus:z-10 focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400">
    </div>
  </div>

  <div>
    <div class="sm:flex rounded-md shadow-sm">
      <input type="text" class="py-3 px-4 pr-11 block w-full border-gray-200 shadow-sm -mt-px -ml-px first:rounded-t-lg last:rounded-b-lg sm:first:rounded-l-lg sm:mt-0 sm:first:ml-0 sm:first:rounded-tr-none sm:last:rounded-bl-none sm:last:rounded-r-lg text-sm relative focus:z-10 focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400">
      <input type="text" class="py-3 px-4 pr-11 block w-full border-gray-200 shadow-sm -mt-px -ml-px first:rounded-t-lg last:rounded-b-lg sm:first:rounded-l-lg sm:mt-0 sm:first:ml-0 sm:first:rounded-tr-none sm:last:rounded-bl-none sm:last:rounded-r-lg text-sm relative focus:z-10 focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400">
      <span class="py-3 px-4 inline-flex items-center min-w-fit w-full border border-gray-200 bg-gray-50 text-sm text-gray-500 -mt-px -ml-px first:rounded-t-lg last:rounded-b-lg sm:w-auto sm:first:rounded-l-lg sm:mt-0 sm:first:ml-0 sm:first:rounded-tr-none sm:last:rounded-bl-none sm:last:rounded-r-lg dark:bg-gray-700 dark:border-gray-700 dark:text-gray-400">First and last name</span>
    </div>
  </div>

  <div>
    <div class="sm:flex rounded-md shadow-sm">
      <input type="text" class="py-3 px-4 pr-11 block w-full border-gray-200 shadow-sm -mt-px -ml-px first:rounded-t-lg last:rounded-b-lg sm:first:rounded-l-lg sm:mt-0 sm:first:ml-0 sm:first:rounded-tr-none sm:last:rounded-bl-none sm:last:rounded-r-lg text-sm relative focus:z-10 focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400">
      <span class="py-3 px-4 inline-flex items-center min-w-fit w-full border border-gray-200 bg-gray-50 text-sm text-gray-500 -mt-px -ml-px first:rounded-t-lg last:rounded-b-lg sm:w-auto sm:first:rounded-l-lg sm:mt-0 sm:first:ml-0 sm:first:rounded-tr-none sm:last:rounded-bl-none sm:last:rounded-r-lg dark:bg-gray-700 dark:border-gray-700 dark:text-gray-400">
        <svg class="hidden sm:block h-4 w-4 text-gray-400" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
          <path fill-rule="evenodd" d="M1 11.5a.5.5 0 0 0 .5.5h11.793l-3.147 3.146a.5.5 0 0 0 .708.708l4-4a.5.5 0 0 0 0-.708l-4-4a.5.5 0 0 0-.708.708L13.293 11H1.5a.5.5 0 0 0-.5.5zm14-7a.5.5 0 0 1-.5.5H2.707l3.147 3.146a.5.5 0 1 1-.708.708l-4-4a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 4H14.5a.5.5 0 0 1 .5.5z" />
        </svg>
        <svg class="sm:hidden mx-auto h-4 w-4 text-gray-400" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
          <path fill-rule="evenodd" d="M11.5 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L11 2.707V14.5a.5.5 0 0 0 .5.5zm-7-14a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L4 13.293V1.5a.5.5 0 0 1 .5-.5z" />
        </svg>
      </span>
      <input type="text" class="py-3 px-4 pr-11 block w-full border-gray-200 shadow-sm -mt-px -ml-px first:rounded-t-lg last:rounded-b-lg sm:first:rounded-l-lg sm:mt-0 sm:first:ml-0 sm:first:rounded-tr-none sm:last:rounded-bl-none sm:last:rounded-r-lg text-sm relative focus:z-10 focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400">
    </div>
  </div>
</div>
Close mutiple input group code

Leading icon

Add a leading icon inside input.

Open this leading icon input group example in new window
Copy leading icon input group code 
<div>
  <label for="hs-leading-icon" class="block text-sm font-medium mb-2 dark:text-white">Email address</label>
  <div class="relative">
    <input type="text" id="hs-leading-icon" name="hs-leading-icon" class="py-3 px-4 pl-11 block w-full border-gray-200 shadow-sm rounded-md text-sm focus:z-10 focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400" placeholder="you@site.com">
    <div class="absolute inset-y-0 left-0 flex items-center pointer-events-none z-20 pl-4">
      <svg class="h-4 w-4 text-gray-400" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
        <path d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414.05 3.555ZM0 4.697v7.104l5.803-3.558L0 4.697ZM6.761 8.83l-6.57 4.027A2 2 0 0 0 2 14h12a2 2 0 0 0 1.808-1.144l-6.57-4.027L8 9.586l-1.239-.757Zm3.436-.586L16 11.801V4.697l-5.803 3.546Z" />
      </svg>
    </div>
  </div>
</div>
Close leading icon input group code

Trailing icon

Add a trailing icon inside input.

Open this trailing icon input group example in new window
Copy trailing icon input group code 
<div>
  <label for="hs-trailing-icon" class="block text-sm font-medium mb-2 dark:text-white">Card number</label>
  <div class="relative">
    <input type="text" id="hs-trailing-icon" name="hs-trailing-icon" class="py-3 px-4 pr-11 block w-full border-gray-200 shadow-sm rounded-md text-sm focus:z-10 focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400" placeholder="xxxx-xxxx-xxxx-xxxx">
    <div class="absolute inset-y-0 right-0 flex items-center pointer-events-none z-20 pr-4">
      <svg class="h-4 w-4 text-gray-400" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
        <path d="M11 5.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-1z" />
        <path d="M2 2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H2zm13 2v5H1V4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1zm-1 9H2a1 1 0 0 1-1-1v-1h14v1a1 1 0 0 1-1 1z" />
      </svg>
    </div>
  </div>
</div>
Close trailing icon input group code

Add-on

Add an add-on in tandem with input.

Open this add on input group example in new window
Copy add on input group code 
<div>
  <label for="hs-input-with-add-on-url" class="block text-sm text-gray-700 font-medium dark:text-white">Website URL</label>
  <div class="flex rounded-md shadow-sm">
    <div class="px-4 inline-flex items-center min-w-fit rounded-l-md border border-r-0 border-gray-200 bg-gray-50 dark:bg-gray-700 dark:border-gray-600">
      <span class="text-sm text-gray-500 dark:text-gray-400">http://</span>
    </div>
    <input type="text" name="hs-input-with-add-on-url" id="hs-input-with-add-on-url" class="py-3 px-4 pr-11 block w-full border-gray-200 shadow-sm rounded-r-md text-sm focus:z-10 focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400" placeholder="www.example.com">
  </div>
</div>
Close add on input group code

Inline add-on

Add an inline add-on inside input.

Open this inline add on input group example in new window
Copy inline add on input group code 
<div>
  <label for="hs-inline-add-on" class="block text-sm font-medium mb-2 dark:text-white">Website URL</label>
  <div class="relative">
    <input type="text" id="hs-inline-add-on" name="hs-inline-add-on" class="py-3 px-4 pl-16 block w-full border-gray-200 shadow-sm rounded-md text-sm focus:z-10 focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400" placeholder="www.example.com">
    <div class="absolute inset-y-0 left-0 flex items-center pointer-events-none z-20 pl-4">
      <span class="text-sm text-gray-500">http://</span>
    </div>
  </div>
</div>
Close inline add on input group code

Multiple add-on

Multiple add-ons are supported and can be mixed with checkbox and radio input versions.

Open this multiple add on input group example in new window
Copy multiple add on input group code 
<div class="flex flex-col gap-3">
  <div>
    <label for="hs-leading-multiple-add-on" class="sr-only">Multiple add-on</label>
    <div class="flex rounded-md shadow-sm">
      <div class="px-4 inline-flex items-center min-w-fit rounded-l-md border border-r-0 border-gray-200 bg-gray-50 dark:bg-gray-700 dark:border-gray-600">
        <span class="text-sm text-gray-500 dark:text-gray-400">$</span>
      </div>
      <div class="px-4 inline-flex items-center min-w-fit border border-r-0 border-gray-200 bg-gray-50 dark:bg-gray-700 dark:border-gray-600">
        <span class="text-sm text-gray-500 dark:text-gray-400">0.00</span>
      </div>
      <input type="text" id="hs-leading-multiple-add-on" name="inline-add-on" class="py-3 px-4 block w-full border-gray-200 shadow-sm rounded-md rounded-l-none text-sm focus:z-10 focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400" placeholder="www.example.com">
    </div>
  </div>

  <div>
    <label for="hs-trailing-multiple-add-on" class="sr-only">Multiple add-on</label>
    <div class="flex rounded-md shadow-sm">
      <input type="text" id="hs-trailing-multiple-add-on" name="inline-add-on" class="py-3 px-4 block w-full border-gray-200 shadow-sm rounded-md rounded-r-none text-sm focus:z-10 focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400" placeholder="www.example.com">
      <div class="px-4 inline-flex items-center min-w-fit border border-l-0 border-gray-200 bg-gray-50 dark:bg-gray-700 dark:border-gray-600">
        <span class="text-sm text-gray-500 dark:text-gray-400">$</span>
      </div>
      <div class="px-4 inline-flex items-center min-w-fit rounded-r-md border border-l-0 border-gray-200 bg-gray-50 dark:bg-gray-700 dark:border-gray-600">
        <span class="text-sm text-gray-500 dark:text-gray-400">0.00</span>
      </div>
    </div>
  </div>
</div>
Close multiple add on input group code

Trailing button add-ons

Open this trailing buttons input group example in new window
Copy trailing buttons input group code 
<div class="flex flex-col gap-3">
  <div>
    <label for="hs-trailing-button-add-on-with-icon" class="sr-only">Label</label>
    <div class="flex rounded-md shadow-sm">
      <input type="text" id="hs-trailing-button-add-on-with-icon" name="hs-trailing-button-add-on-with-icon" class="py-3 px-4 block w-full border-gray-200 shadow-sm rounded-l-md text-sm focus:z-10 focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400">
      <button type="button" class="inline-flex flex-shrink-0 justify-center items-center h-[2.875rem] w-[2.875rem] rounded-r-md border border-transparent font-semibold bg-hs2-primary text-white hover:bg-hs2-primary-600 focus:z-10 focus:outline-none focus:ring-2 focus:ring-hs2-primary transition-all text-sm">
        <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
          <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
        </svg>
      </button>
    </div>
  </div>

  <div>
    <label for="hs-trailing-button-add-on-with-leading-and-trailing" class="sr-only">Label</label>
    <div class="flex rounded-md shadow-sm">
      <span class="px-4 inline-flex items-center min-w-fit rounded-l-md border border-r-0 border-gray-200 bg-gray-50 text-sm dark:bg-gray-700 dark:border-gray-700">
        <span class="text-sm text-gray-500 dark:text-gray-400">http://</span>
      </span>
      <input type="text" id="hs-trailing-button-add-on-with-leading-and-trailing" name="hs-trailing-button-add-on-with-leading-and-trailing" class="py-3 px-4 block w-full border-gray-200 shadow-sm rounded-0 text-sm focus:z-10 focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400">
      <button type="button" class="inline-flex flex-shrink-0 justify-center items-center h-[2.875rem] w-[2.875rem] rounded-r-md border border-transparent font-semibold bg-hs2-primary text-white hover:bg-hs2-primary-600 focus:z-10 focus:outline-none focus:ring-2 focus:ring-hs2-primary transition-all text-sm">
        <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
          <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
        </svg>
      </button>
    </div>
  </div>

  <div>
    <label for="hs-trailing-button-add-on-with-icon-and-button" class="sr-only">Label</label>
    <div class="relative flex rounded-md shadow-sm">
      <input type="text" id="hs-trailing-button-add-on-with-icon-and-button" name="hs-trailing-button-add-on-with-icon-and-button" class="py-3 px-4 pl-11 block w-full border-gray-200 shadow-sm rounded-l-md text-sm focus:z-10 focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400">
      <div class="absolute inset-y-0 left-0 flex items-center pointer-events-none z-20 pl-4">
        <svg class="h-4 w-4 text-gray-400" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
          <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
        </svg>
      </div>
      <button type="button" class="py-3 px-4 inline-flex flex-shrink-0 justify-center items-center rounded-r-md border border-transparent font-semibold bg-hs2-primary text-white hover:bg-hs2-primary-600 focus:z-10 focus:outline-none focus:ring-2 focus:ring-hs2-primary transition-all text-sm">Search</button>
    </div>
  </div>

  <div>
    <label for="hs-trailing-button-add-on" class="sr-only">Label</label>
    <div class="flex rounded-md shadow-sm">
      <input type="text" id="hs-trailing-button-add-on" name="hs-trailing-button-add-on" class="py-3 px-4 block w-full border-gray-200 shadow-sm rounded-l-md text-sm focus:z-10 focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400">
      <button type="button" class="py-3 px-4 inline-flex flex-shrink-0 justify-center items-center gap-2 rounded-r-md border border-transparent font-semibold bg-hs2-primary text-white hover:bg-hs2-primary-600 focus:z-10 focus:outline-none focus:ring-2 focus:ring-hs2-primary transition-all text-sm">
        Button
      </button>
    </div>
  </div>

  <div>
    <label for="hs-trailing-button-add-on-multiple-add-ons" class="sr-only">Label</label>
    <div class="flex rounded-md shadow-sm">
      <input type="text" id="hs-trailing-button-add-on-multiple-add-ons" name="hs-trailing-button-add-on-multiple-add-ons" class="py-3 px-4 block w-full border-gray-200 shadow-sm rounded-l-md text-sm focus:z-10 focus:border-hs2-primary focus:z-10 focus:ring-hs2-primary dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400">
      <button type="button" class="-ml-px py-3 px-4 inline-flex justify-center items-center gap-2 border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-hs2-primary-600 transition-all text-sm dark:bg-gray-800 dark:hover:bg-slate-800 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white">
        Button
      </button>
      <button type="button" class="py-3 px-4 inline-flex flex-shrink-0 justify-center items-center gap-2 rounded-r-md border border-transparent font-semibold bg-hs2-primary text-white hover:bg-hs2-primary-600 focus:z-10 focus:outline-none focus:ring-2 focus:ring-hs2-primary transition-all text-sm">
        Button
      </button>
    </div>
  </div>
</div>
Close trailing buttons input group code

Leading button add-ons

Open this leading buttons input group example in new window
Copy leading buttons input group code 
<div class="flex flex-col gap-3">
  <div>
    <label for="hs-leading-button-add-on-with-icon" class="sr-only">Label</label>
    <div class="flex rounded-md shadow-sm">
      <button type="button" class="inline-flex flex-shrink-0 justify-center items-center h-[2.875rem] w-[2.875rem] rounded-l-md border border-transparent font-semibold bg-hs2-primary text-white hover:bg-hs2-primary-600 focus:z-10 focus:outline-none focus:ring-2 focus:ring-hs2-primary transition-all text-sm">
        <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
          <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
        </svg>
      </button>
      <input type="text" id="hs-leading-button-add-on-with-icon" name="hs-leading-button-add-on-with-icon" class="py-3 px-4 block w-full border-gray-200 shadow-sm rounded-r-md text-sm focus:z-10 focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400">
    </div>
  </div>

  <div>
    <label for="hs-leading-button-add-on-with-leading-and-leading" class="sr-only">Label</label>
    <div class="flex rounded-md shadow-sm">
      <button type="button" class="inline-flex flex-shrink-0 justify-center items-center h-[2.875rem] w-[2.875rem] rounded-l-md border border-transparent font-semibold bg-hs2-primary text-white hover:bg-hs2-primary-600 focus:z-10 focus:outline-none focus:ring-2 focus:ring-hs2-primary transition-all text-sm">
        <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
          <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
        </svg>
      </button>
      <input type="text" id="hs-leading-button-add-on-with-leading-and-leading" name="hs-leading-button-add-on-with-leading-and-leading" class="py-3 px-4 block w-full border-gray-200 shadow-sm rounded-0 text-sm focus:z-10 focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400">
      <span class="px-4 inline-flex items-center min-w-fit rounded-r-md border border-l-0 border-gray-200 bg-gray-50 text-sm dark:bg-gray-700 dark:border-gray-700">
        <span class="text-sm text-gray-500 dark:text-gray-400">http://</span>
      </span>
    </div>
  </div>

  <div>
    <label for="hs-leading-button-add-on-with-icon-and-button" class="sr-only">Label</label>
    <div class="relative flex rounded-md shadow-sm">
      <button type="button" class="py-3 px-4 inline-flex flex-shrink-0 justify-center items-center rounded-l-md border border-transparent font-semibold bg-hs2-primary text-white hover:bg-hs2-primary-600 focus:z-10 focus:outline-none focus:ring-2 focus:ring-hs2-primary transition-all text-sm">Search</button>
      <input type="text" id="hs-leading-button-add-on-with-icon-and-button" name="hs-leading-button-add-on-with-icon-and-button" class="py-3 px-4 pr-11 block w-full border-gray-200 shadow-sm rounded-r-md text-sm focus:z-10 focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400">
      <div class="absolute inset-y-0 right-0 flex items-center pointer-events-none z-20 pr-4">
        <svg class="h-4 w-4 text-gray-400" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
          <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
        </svg>
      </div>
    </div>
  </div>

  <div>
    <label for="hs-leading-button-add-on" class="sr-only">Label</label>
    <div class="flex rounded-md shadow-sm">
      <button type="button" class="py-3 px-4 inline-flex flex-shrink-0 justify-center items-center gap-2 rounded-l-md border border-transparent font-semibold bg-hs2-primary text-white hover:bg-hs2-primary-600 focus:z-10 focus:outline-none focus:ring-2 focus:ring-hs2-primary transition-all text-sm">
        Button
      </button>
      <input type="text" id="hs-leading-button-add-on" name="hs-leading-button-add-on" class="py-3 px-4 block w-full border-gray-200 shadow-sm rounded-r-md text-sm focus:z-10 focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400">
    </div>
  </div>

  <div>
    <label for="hs-leading-button-add-on-multiple-add-ons" class="sr-only">Label</label>
    <div class="flex rounded-md shadow-sm">
      <button type="button" class="py-3 px-4 inline-flex flex-shrink-0 justify-center items-center gap-2 rounded-l-md border border-transparent font-semibold bg-hs2-primary text-white hover:bg-hs2-primary-600 focus:z-10 focus:outline-none focus:ring-2 focus:ring-hs2-primary transition-all text-sm">
        Button
      </button>
      <button type="button" class="-mr-px py-3 px-4 inline-flex justify-center items-center gap-2 border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-2 focus:ring-hs2-primary-600 transition-all text-sm dark:bg-gray-800 dark:hover:bg-slate-800 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white">
        Button
      </button>
      <input type="text" id="hs-leading-button-add-on-multiple-add-ons" name="hs-leading-button-add-on-multiple-add-ons" class="py-3 px-4 block w-full border-gray-200 shadow-sm rounded-r-md text-sm focus:z-10 focus:border-hs2-primary focus:z-10 focus:ring-hs2-primary dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400">
    </div>
  </div>
</div>
Close leading buttons input group code

Inline leading select

Add an inline leading select inside input.

Open this inline leading select input group example in new window
Copy inline leading select input group code 
<div>
  <label for="hs-inline-leading-select-label" class="block text-sm font-medium mb-2 dark:text-white">Phone number</label>
  <div class="relative">
    <input type="text" id="hs-inline-leading-select-label" name="inline-add-on" class="py-3 px-4 pl-20 block w-full border-gray-200 shadow-sm rounded-md text-sm focus:z-10 focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400" placeholder="+1 (000) 000-0000">
    <div class="absolute inset-y-0 left-0 flex items-center text-gray-500 pl-px">
      <label for="hs-inline-leading-select-country" class="sr-only">Country</label>
      <select id="hs-inline-leading-select-country" name="hs-inline-leading-select-country" class="block w-full border-transparent rounded-md focus:ring-hs2-primary-600 focus:border-hs2-primary-600 dark:bg-gray-800">
        <option>US</option>
        <option>CA</option>
        <option>EU</option>
      </select>
    </div>
  </div>
</div>
Close inline leading select input group code

Inline leading add-on and trailing select

Add an inline leading add-on and trailing select inside input.

Open this inline leading select input group example in new window
Copy inline leading select input group code 
<div>
  <label for="hs-inline-leading-select-label" class="block text-sm font-medium mb-2 dark:text-white">Phone number</label>
  <div class="relative">
    <input type="text" id="hs-inline-leading-select-label" name="inline-add-on" class="py-3 px-4 pl-20 block w-full border-gray-200 shadow-sm rounded-md text-sm focus:z-10 focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400" placeholder="+1 (000) 000-0000">
    <div class="absolute inset-y-0 left-0 flex items-center text-gray-500 pl-px">
      <label for="hs-inline-leading-select-country" class="sr-only">Country</label>
      <select id="hs-inline-leading-select-country" name="hs-inline-leading-select-country" class="block w-full border-transparent rounded-md focus:ring-hs2-primary-600 focus:border-hs2-primary-600 dark:bg-gray-800">
        <option>US</option>
        <option>CA</option>
        <option>EU</option>
      </select>
    </div>
  </div>
</div>
Close inline leading select input group code

Checkbox and radios

Place any checkbox or radio option within an input group's addon instead of text.

Open this checkbox and radios input group example in new window
Copy checkbox and radios input group code 
<div class="flex flex-col gap-3">
  <div>
    <div class="flex rounded-md shadow-sm">
      <span class="px-4 inline-flex items-center min-w-fit rounded-l-md border border-r-0 border-gray-200 bg-gray-50 text-sm text-gray-500 dark:bg-gray-700 dark:border-gray-700 dark:text-gray-400">
        <span class="flex">
          <input type="checkbox" class="shrink-0 border-gray-200 rounded text-hs2-primary-600 focus:ring-hs2-primary dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-hs2-primary dark:checked:border-hs2-primary dark:focus:ring-offset-gray-800" id="hs-input-group-with-checkbox">
          <label for="hs-input-group-with-checkbox" class="sr-only">Checkbox</label>
        </span>
      </span>
      <input type="text" name="hs-input-with-add-on-url-checkbox" id="hs-input-with-add-on-url-checkbox" class="py-3 px-4 pr-11 block w-full border-gray-200 shadow-sm rounded-r-md text-sm focus:z-10 focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400" placeholder="Checkbox">
    </div>
  </div>

  <div>
    <div class="flex rounded-md shadow-sm">
      <span class="px-4 inline-flex items-center min-w-fit rounded-l-md border border-r-0 border-gray-200 bg-gray-50 text-sm text-gray-500 dark:bg-gray-700 dark:border-gray-700 dark:text-gray-400">
        <span class="flex">
          <input type="radio" class="shrink-0 border-gray-200 rounded-full text-hs2-primary-600 focus:ring-hs2-primary dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-hs2-primary dark:checked:border-hs2-primary dark:focus:ring-offset-gray-800" id="hs-input-group-with-radio">
          <label for="hs-input-group-with-radio" class="sr-only">Radio</label>
        </span>
      </span>
      <input type="text" name="hs-input-with-add-on-url-radio" id="hs-input-with-add-on-url-radio" class="py-3 px-4 pr-11 block w-full border-gray-200 shadow-sm rounded-r-md text-sm focus:z-10 focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400" placeholder="Radio">
    </div>
  </div>
</div>
Close checkbox and radios input group code

Search box with loading

Open this search box with loading input group example in new window
Copy search box with loading input group code 
<div class="flex flex-col gap-3">
  <div>
    <label for="hs-search-box-with-loading-1" class="block text-sm font-medium mb-2 dark:text-white">Search</label>
    <div class="relative">
      <input type="text" id="hs-search-box-with-loading-1" name="hs-search-box-with-loading-1" class="py-3 px-4 pl-11 block w-full border-gray-200 shadow-sm rounded-md text-sm focus:z-10 focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400" placeholder="Input search">
      <div class="absolute inset-y-0 left-0 flex items-center pointer-events-none pl-4">
        <div class="animate-spin inline-block w-4 h-4 border-[3px] border-current border-t-transparent text-hs2-primary-600 rounded-full" role="status" aria-label="loading">
          <span class="sr-only">Loading...</span>
        </div>
      </div>
    </div>
  </div>

  <div>
    <label for="hs-search-box-with-loading-2" class="block text-sm font-medium mb-2 dark:text-white">Search</label>
    <div class="flex rounded-md shadow-sm">
      <input type="text" id="hs-search-box-with-loading-2" name="hs-search-box-with-loading-2" class="py-3 px-4 block w-full border-gray-200 shadow-sm rounded-l-md text-sm focus:z-10 focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400" placeholder="Input search">
      <button type="button" class="inline-flex flex-shrink-0 justify-center items-center h-[2.875rem] w-[2.875rem] rounded-r-md border border-transparent font-semibold bg-hs2-primary text-white hover:bg-hs2-primary-600 focus:z-10 focus:outline-none focus:ring-2 focus:ring-hs2-primary transition-all text-sm">
        <span class="animate-spin inline-block w-4 h-4 border-[3px] border-current border-t-transparent text-white rounded-full" role="status" aria-label="loading">
          <span class="sr-only">Loading...</span>
        </span>
      </button>
    </div>
  </div>

  <div>
    <label for="hs-search-box-with-loading-3" class="block text-sm font-medium mb-2 dark:text-white">Search</label>
    <div class="flex rounded-md shadow-sm">
      <span class="px-4 inline-flex items-center min-w-fit rounded-l-md border border-r-0 border-gray-200 bg-gray-50 text-sm text-gray-500 dark:bg-gray-700 dark:border-gray-700 dark:text-gray-400">http://</span>
      <input type="text" id="hs-search-box-with-loading-3" name="hs-search-box-with-loading-3" class="py-3 px-4 block w-full border-gray-200 shadow-sm rounded-0 text-sm focus:z-10 focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400" placeholder="Input search">
      <button type="button" class="inline-flex flex-shrink-0 justify-center items-center h-[2.875rem] w-[2.875rem] rounded-r-md border border-transparent font-semibold bg-hs2-primary text-white hover:bg-hs2-primary-600 focus:z-10 focus:outline-none focus:ring-2 focus:ring-hs2-primary transition-all text-sm">
        <span class="animate-spin inline-block w-4 h-4 border-[3px] border-current border-t-transparent text-white rounded-full" role="status" aria-label="loading">
          <span class="sr-only">Loading...</span>
        </span>
      </button>
    </div>
  </div>

  <div>
    <label for="hs-search-box-with-loading-4" class="block text-sm font-medium mb-2 dark:text-white">Search</label>
    <div class="flex rounded-md shadow-sm">
      <input type="text" id="hs-search-box-with-loading-4" name="hs-search-box-with-loading-4" class="py-3 px-4 block w-full border-gray-200 shadow-sm rounded-l-md text-sm focus:z-10 focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400" placeholder="Input search">
      <button type="button" class="py-3 px-4 inline-flex flex-shrink-0 justify-center items-center gap-2 rounded-r-md border border-transparent font-semibold bg-hs2-primary text-white hover:bg-hs2-primary-600 focus:z-10 focus:outline-none focus:ring-2 focus:ring-hs2-primary transition-all text-sm">
        <span class="animate-spin inline-block w-4 h-4 border-[3px] border-current border-t-transparent text-white rounded-full" role="status" aria-label="loading">
          <span class="sr-only">Loading...</span>
        </span>
        Search
      </button>
    </div>
  </div>

  <div>
    <label for="hs-search-box-with-loading-5" class="block text-sm font-medium mb-2 dark:text-white">Search</label>
    <div class="relative flex rounded-md shadow-sm">
      <input type="text" id="hs-search-box-with-loading-5" name="hs-search-box-with-loading-5" class="py-3 px-4 pl-11 block w-full border-gray-200 shadow-sm rounded-l-md text-sm focus:z-10 focus:border-hs2-primary focus:ring-hs2-primary dark:bg-slate-900 dark:border-gray-700 dark:text-gray-400" placeholder="Input search">
      <div class="absolute inset-y-0 left-0 flex items-center pointer-events-none pl-4">
        <svg class="h-4 w-4 text-gray-400" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
          <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
        </svg>
      </div>
      <button type="button" class="py-3 px-4 inline-flex flex-shrink-0 justify-center items-center gap-2 rounded-r-md border border-transparent font-semibold bg-hs2-primary text-white hover:bg-hs2-primary-600 focus:z-10 focus:outline-none focus:ring-2 focus:ring-hs2-primary transition-all text-sm">
        <span class="animate-spin inline-block w-4 h-4 border-[3px] border-current border-t-transparent text-white rounded-full" role="status" aria-label="loading">
          <span class="sr-only">Loading...</span>
        </span>
        Search
      </button>
    </div>
  </div>
</div>
Close search box with loading input group code