SearchInput

Input with search icon and clear button.

import { SearchInput } from '@ybouhjira/hyperkit';

#Playground

Edit the code — the preview recompiles and re-renders as you type.

Loading preview…

<SearchInput placeholder="Search files..." />

<SearchInput placeholder="Search" shortcut="⌘K" />

Prop	Type	Default	Description
`value`	`string`	—	Controlled input value.
`placeholder`	`string`	`'Search...'`	Placeholder text.
`shortcut`	`string`	—	Keyboard shortcut hint displayed when empty.
`onSearch`	`(value: string) => void`	—	Callback when Enter key is pressed.
`onChange`	`(value: string) => void`	—	Callback when input value changes.
`onClear`	`() => void`	—	Callback when clear button is clicked.
`class`	`string`	—	Additional CSS classes.
`autofocus`	`boolean`	`false`	Auto-focus the input on mount.
`disabled`	`boolean`	`false`	Disable the input.
`unstyled`	`boolean`	`false`	Remove all default styling classes.

This component reads the following CSS custom properties. Override them globally or per-instance to restyle it — see the CSS Variables guide.