SearchInput

Search field with a leading magnifier and an optional trailing keyboard-hint (the Gavel app-bar ⌘K search). Controlled. Built on clicky tokens. When onShortcut is provided, a global cmd/ctrl+K listener is wired so the field can be focused from anywhere.

Source

Import

import { SearchInput } from "@flanksource/clicky-ui/components";

Demos

Default · Open in Storybook

No Shortcut · Open in Storybook

Typing · Open in Storybook

The props table documents the component-specific surface. Standard DOM attributes inherited from React, such as className, event handlers, and accessibility attributes, may also be accepted when the component’s prop type extends a native element.

Props

Prop	Type	Default	Description
as	enum	—	—
hotkey	string	—	Shortcut to bind, in `useHotkey` combo syntax (`"mod+k"`, `"mod+shift+p"`), where `mod` is ⌘ on macOS and Ctrl elsewhere. Preferred over `shortcutKey`: it matches modifiers exactly, whereas a key derived from the `shortcut` badge cannot express them.
inputClassName	string	—	Classes applied to the native input.
invalid	boolean	—	Marks the control as invalid: renders a destructive border and sets aria-invalid on the native element. Purely presentational — the consumer decides what invalid means, exactly as `Combobox`'s own `invalid` does.
onChange*	(…) => void	—	Called with the next query string.
onShortcut	(…) => …	—	Called before the field is focused when the shortcut is pressed. When set, the matching shortcut (cmd/ctrl + the last character of `shortcut`, default `k`) focuses the input from anywhere on the page.
prefix	ReactNode	—	Leading adornment. Defaults to the search icon.
shortcut	string | null	⌘K	Keyboard-shortcut hint rendered as a trailing `<kbd>`. Pass `null` to hide it. Keyboard-shortcut hint rendered as a trailing `<kbd>` (Gavel's `⌘K`). Pass `null` to hide it. Defaults to `⌘K`.
shortcutClassName	string	—	Classes applied to the shortcut badge.
shortcutKey	string	—	Override the key matched for cmd/ctrl shortcuts. Defaults to the shortcut's last character.
suffix	ReactNode	—	Trailing adornment rendered after the input and before the shortcut.
value*	string	—	Controlled query value.