Skip to content

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

Free

Search Input for Vue

A Search field with a search icon inside it and the placeholder Search.... Typing here does not filter a list.

UI library: Ark UI

A Search label and a search icon inside the field. The placeholder is Search.... Nothing in this demo filters as you type.

Use it as the query for a list you filter yourself. Suggestions under the field belong in a Combobox. In Vue, Ark UI does not search your data.

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 anatomy: input, placeholder, value, caret

Usage

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

FAQ

What does type search give this field?

Browsers treat it as a search box: many show a clear button while there's text, Escape clears it, and phones show a search key on the keyboard.

How is the icon placed inside the field?

The field is an InputGroup: InputGroupInput is the input and InputGroupAddon holds SearchIcon. The addon comes after the input in the markup and sits at the inline start, so it is on the left in left-to-right text and on the right in right-to-left text. Clicking it focuses the input.

Is the icon read by screen readers?

No. SearchIcon has aria-hidden, because the Search label already names the field. The icon is a visual hint only.

How is Search tied to the field?

Clicking the label focuses the field, and screen readers announce it with the field. Field links FieldLabel to the input inside it, so there is no id to match.

Can I hide the label?

Yes. A search box often has no visible label; keep FieldLabel with sr-only so the field is still named for screen readers.

How do I filter as people type?

Keep the query in state and filter your list from it. For a list of suggestions under the field, use Combobox or Command.

API Reference

Field

No extra props in this demo. The rest is on the Field page.

Input Group

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

All 24 input examples