SearchField

Spotlight-inspired search input with clear button.

Preview

bash

npx auralix-ui add search-field

tsx

import { SearchField } from "@/components/ui/SearchField";

<SearchField placeholder="Search..." onSearch={(q) => console.log(q)} />

Name	Type	Default	Description
`value`	`string`	`-`	Input value.
`onChange`	`(value: string) => void`	`-`	Callback on value change.
`onSearch`	`(value: string) => void`	`-`	Callback on Enter press.
`placeholder`	`string`	`"Search..."`	Placeholder text.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Size of the input.
`loading`	`boolean`	`false`	Show loading indicator.

On this page