Search Inputs

Allow users to enter search queries and receive relevant results with the search input field

Variations

Basic Search Input

Copy as:HTMLReact

copydone

<!-- Component: Plain basic base sized search input  -->
<div class="relative my-6">
  <input id="id-s01" type="search" name="id-s01" placeholder="Search here" aria-label="Search content" class="relative w-full h-10 px-4 pr-12 text-sm transition-all border-b outline-none focus-visible:outline-none peer border-slate-200 text-slate-500 autofill:bg-white invalid:border-pink-500 invalid:text-pink-500 focus:border-emerald-500 focus:outline-none invalid:focus:border-pink-500 disabled:cursor-not-allowed disabled:bg-slate-50 disabled:text-slate-400" />
  <svg xmlns="http://www.w3.org/2000/svg" class="absolute top-2.5 right-4 h-5 w-5 cursor-pointer stroke-slate-400 peer-disabled:cursor-not-allowed" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.5" aria-hidden="true" aria-label="Search icon" role="graphics-symbol">
    <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
  </svg>
</div>
<!-- End Plain search input  -->

Outline Search Input

Copy as:HTMLReact

copydone

<!-- Component: Rounded basic search input -->
<div class="relative my-6">
  <input id="id-s03" type="search" name="id-s03" placeholder="Search here" aria-label="Search content" class="relative w-full h-10 px-4 pr-12 text-sm transition-all border rounded outline-none focus-visible:outline-none peer border-slate-200 text-slate-500 autofill:bg-white invalid:border-pink-500 invalid:text-pink-500 focus:border-emerald-500 focus:outline-none invalid:focus:border-pink-500 disabled:cursor-not-allowed disabled:bg-slate-50 disabled:text-slate-400" />
  <svg xmlns="http://www.w3.org/2000/svg" class="absolute top-2.5 right-4 h-5 w-5 cursor-pointer stroke-slate-400 peer-disabled:cursor-not-allowed" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="1.5" aria-hidden="true" aria-label="Search icon" role="graphics-symbol">
    <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
  </svg>
</div>
<!-- End Rounded search input -->

Usage

<input> elements of type search are very similar to those of type text, except that they are specifically intended for handling search terms.

Specs

Search input fields come in two basic styles (base and outlined) and 2 sizes:

Base: text font size of 0.875rem (14px).
Large: text font size of 1rem (16px).

Accessibility notes

For better accessibility when using the <input> type search element:

Use an aria-label attribute on the <input> itself. This should replace the missing label that will be read out as an equivalent by the screen reader.
A role attribute of value search on the <form> element will cause screen readers to announce that the form is a search form.