Search Input

Install

Add Search Input from the VegaStack registry. The CLI verifies the item's integrity hash before writing it.

pnpm dlx shadcn@latest add @vegastack/search-input

The same command installs the registry items it composes: @vegastack/input-group.

Usage

import { SearchInput } from "@/components/ui/search-input";

<SearchInput
  value={query}
  onValueChange={setQuery}
  aria-label="Search projects"
  placeholder="Search projects…"
/>;

SearchInput composes InputGroup and replaces the browser-owned search cancel glyph with one semantic, token-colored clear button. className styles the group root; the forwarded ref and native input attributes target the inner HTMLInputElement.

Examples

States

The clear button appears only while a mutable field has a value. Empty, disabled, and read-only fields expose no clear action; invalid styling comes from the shared InputGroup contract.

Native form semantics

Names, labels, descriptions, submission, and reset stay on the inner native search input. In uncontrolled mode, reset restores defaultValue and updates the clear action.

API Reference

SearchInput

Prop	Type	Default	Description
`clearLabel`	`string`	`'Clear search'`	Accessible name for the clear action.
`data-slot`	`string`	`'search-input'`	Slot name applied to the InputGroup root.
`defaultValue`	`string`	`''`	The initial value when the search field is uncontrolled.
`onValueChange`	`((value: string) => void)`	—	Called with the next value after typing or clearing.
`value`	`string`	—	The controlled search value.

Data attributes and CSS variables on SearchInput

Attribute	Values
`data-slot`	`"search-input-clear"`

Accessibility

Give the search field an accessible name with a visible Label, aria-label, or aria-labelledby.
The clear action is a native button named Clear search by default. Use clearLabel when the page contains several search fields.
Tab moves from the input to the clear button. Enter, Space, or Escape clears a filled mutable field and returns focus to the input.
The clear button has a real 24×24px border box and mirrors to the logical end in RTL.

Contract	States tested
Behaviour	`controlled`, `uncontrolled`, `empty`, `disabled`, `readonly`, `invalid`
Accessibility	`native-search-semantics`, `browser-accessibility-test`, `labeled`, `disabled`, `invalid`
Visual	`default`, `hover`, `focus`, `disabled`, `invalid`

Do / Don't

Use SearchInput when a query field needs a consistent clear action across supported browsers.

Don't

Add a custom clear button to a generic Input or rely on the browser's native search cancel glyph.

On this page