Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Search with Icon Input Group for React

A search field with a magnifying glass icon at the start. Clicking the icon focuses the field.

A search input with a magnifying glass before the text. The icon is not its own button. Clicking it focuses the field. The search type gives assistive tech a search field and mobile keyboards a search key.

Use it for a find box that runs as someone types or on Enter. A list of suggestions is a Combobox. In React, Base UI does not run the search.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Input Group anatomy: root, addon, input, text, button

Usage

<InputGroup className="w-full max-w-sm bg-background">
  <InputGroupInput
    aria-label="Search"
    placeholder="Search..."
    type="search"
  />
  <InputGroupAddon>
    <SearchIcon aria-hidden="true" />
  </InputGroupAddon>
</InputGroup>

FAQ

How does the icon sit before the input?

The InputGroupAddon keeps the default align, inline-start. It's written after the input, and align puts it first visually.

Does clicking the icon focus the field?

A click on the addon's empty space focuses the input, because the addon looks for the group's input. Clicks on a button inside the addon stay on that button.

Why type=search?

It marks the field as search for assistive tech and gives mobile keyboards a search key.

How is the field labeled?

aria-label="Search"; the icon is aria-hidden.

How do I show a result count?

Add an inline-end addon with the count, as the component's own demo does.

How wide is it?

w-full max-w-sm on InputGroup: full width up to max-w-sm.

API Reference

Input Group

Sets aria-label="Search", placeholder="Search..." and type="search". The rest is on the Input Group page.

All 39 input group examples