Skip to content

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

Free

Search with Icon Input Group for Vue

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

UI library: Ark UI

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 Vue, Ark UI does not run the search.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

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

Usage

<InputGroup class="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