Search

Add a search form to help visitors find site content. Compare default, large, and icon-button layouts.

Examples

Default

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px

HTML

<div>

  <label for="search-default" class="sr-only">Search</label>
  <div class="relative flex items-center">
    <input
      id="search-default"
      type="search"
      class="p-2 w-full max-w-lg h-8 border border-r-0 border-gray-60 focus:outline-offset-0 focus:outline-4 focus:outline-blue-40v data-[invalid]:ring-4 data-[invalid]:ring-red-60v data-[invalid]:border-transparent data-[invalid]:outline-offset-4"
    />
    <button class="rounded-r font-bold leading-none text-white px-4 h-8 bg-blue-60v hover:bg-blue-warm-70v active:bg-blue-warm-80v focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">Search</button>
  </div>

</div>

Large

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px

HTML

<div>

  <label for="search-large" class="sr-only">Search</label>
  <div class="relative flex items-center">
    <input
      id="search-large"
      type="search"
      class="p-2 text-xl w-full max-w-lg h-12 border border-r-0 border-gray-60 focus:outline-offset-0 focus:outline-4 focus:outline-blue-40v data-[invalid]:ring-4 data-[invalid]:ring-red-60v data-[invalid]:border-transparent data-[invalid]:outline-offset-4"
    />
    <button class="rounded-r font-bold leading-none text-white text-xl px-8 h-12 bg-blue-60v hover:bg-blue-warm-70v active:bg-blue-warm-80v focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">Search</button>
  </div>

</div>

Icon Button

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px

HTML

<div>

  <label for="search-icon" class="sr-only">Search</label>
  <div class="relative flex items-center">
    <input
      id="search-icon"
      type="search"
      class="p-2 w-full max-w-lg h-8 border border-r-0 border-gray-60 focus:outline-offset-0 focus:outline-4 focus:outline-blue-40v data-[invalid]:ring-4 data-[invalid]:ring-red-60v data-[invalid]:border-transparent data-[invalid]:outline-offset-4"
    />
    <button aria-label="search" class="rounded-r flex items-center font-bold leading-none text-white px-3 h-8 bg-blue-60v hover:bg-blue-warm-70v active:bg-blue-warm-80v focus:outline-4 focus:outline-offset-4 focus:outline-blue-40v">
      <div class="icon-[material-symbols--search] size-6"></div>
    </button>
  </div>

</div>