Input group

Use an input group to add a prefix or suffix that clarifies units, symbols, or the information a text field expects.

Example

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px

Credit card number

Weight, in pounds

HTML

<div class="space-y-12">
  <div class="max-w-xs">
    <label for="card-number" class="block">Credit card number</label>
    <div class="mt-2 max-w-mobile-lg relative flex items-center">
      <div aria-hidden="true" class="select-none pointer-events-none absolute left-0 whitespace-nowrap px-2 text-gray-50 flex items-center">
        <div class="icon-[material-symbols--credit-card-outline] size-6"></div>
      </div>
      <input id="card-number" inputmode="numeric" autocomplete="cc-number" class="p-2 w-full h-10 border border-gray-60 focus:outline-offset-0 focus:outline-4 focus:outline-blue-40v invalid:border-red-60v invalid:border-4 invalid:py-1 valid:border-green-cool-40v valid:border-4 valid:py-1 bg-white pl-10" />
    </div>
  </div>

  <div class="max-w-28">
    <label for="weight" class="block">Weight, in pounds</label>
    <div class="mt-2 max-w-mobile-lg relative flex items-center">
      <input id="weight" inputmode="decimal" class="p-2 w-full h-10 border border-gray-60 focus:outline-offset-0 focus:outline-4 focus:outline-blue-40v invalid:border-red-60v invalid:border-4 invalid:py-1 valid:border-green-cool-40v valid:border-4 valid:py-1 bg-white pr-10" />
      <div aria-hidden="true" class="select-none pointer-events-none absolute right-0 whitespace-nowrap px-2 text-gray-50">lbs.</div>
    </div>
  </div>
</div>