Search Field

A text input with a search icon, clearable value, and optional keyboard shortcut hint.

<SearchField
  value={query}
  onChange={setQuery}
  placeholder="Search components..."
  shortcut="/"
/>

Prop	Type	Default	Description
`value` required	`string`	—	The controlled value of the search field.
`onChange` required	`(value: string) => void`	—	Callback fired when the input value changes.
`placeholder`	`string`	`"Search..."`	Placeholder text shown when the field is empty.
`shortcut`	`string`	—	Optional keyboard shortcut label displayed when empty.
`onClear`	`() => void`	—	Optional callback fired when the clear button is clicked.
`className`	`string`	—	Additional CSS classes.