Search Input

An enhanced search field with a clear button, loading spinner, and optional keyboard shortcut hint. The shortcut badge is decorative — wire your own keyboard handler to open/focus the field.

⌘K

import { SearchInput } from "@aetherstack/patterns"

Installation

terminal

npx aether-ui add search-input

Import

import.tsx

import { SearchInput } from "@aetherstack/patterns"

Usage

search-input.tsx

import * as React from "react"
import { SearchInput } from "@aetherstack/patterns"

export function MySearch() {
  const [value, setValue] = React.useState("")
  return (
    <SearchInput
      value={value}
      onValueChange={setValue}
      placeholder="Search…"
      shortcut="⌘K"
    />
  )
}

Props

Prop	Type	Default	Description
value*	string	—	Controlled input value.
onValueChange*	(value: string) => void	—	Callback fired on every keystroke and on clear.
placeholder	string	"Search…"	Input placeholder text.
shortcut	string	—	Keyboard shortcut badge text shown on the right (e.g. "⌘K").
loading	boolean	false	Replaces the search icon with a spinner when true.
disabled	boolean	false	Disables the input.
className	string	—	Additional classes on the input wrapper.

* Required

Accessibility

→Input has role="searchbox" and an accessible label via aria-label or a paired <label> element.
→The clear button carries aria-label="Clear search" and is only rendered when value is non-empty.
→The shortcut badge is aria-hidden — it is a visual hint only.
→Loading spinner is aria-hidden; live search results should use an aria-live region separately.