SearchField

A search input with a built-in clear button, supporting controlled and uncontrolled modes with multiple sizes and colors.

Basic

A clear button appears when the field has a value. Use the onClear callback to handle clearing.

Replace the default magnifying glass with any icon via the startIcon prop.

Prop	Type	Default	Description
`value`	`string`	—	The current search value (controlled).
`defaultValue`	`string`	—	The initial search value (uncontrolled).
`onValueChange`	`(value: string) => void`	—	Called when the search value changes.
`onClear`	`() => void`	—	Called when the clear button is clicked.
`placeholder`	`string`	—	Placeholder text shown when the input is empty.
`color`	`"blue" \| "red" \| "green" \| "yellow" \| "purple" \| "neutral" \| string`	`"blue"`	Accent color for the focus ring.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Size preset.
`startIcon`	`ReactNode`	—	Custom icon to replace the default magnifying glass.
`--mantle-bg`	`CSS variable`	`theme default`	Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}
`--mantle-border`	`CSS variable`	`theme default`	Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}
`--mantle-text`	`CSS variable`	`theme default`	Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}
`--mantle-ring`	`CSS variable`	`accent`	Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}

value

string

The current search value (controlled).

defaultValue

string

The initial search value (uncontrolled).

onValueChange

(value: string) => void

Called when the search value changes.

onClear

() => void

Called when the clear button is clicked.

placeholder

string

Placeholder text shown when the input is empty.

color"blue"

Accent color for the focus ring.

size"md"

"sm" | "md" | "lg"

Size preset.

startIcon

ReactNode

Custom icon to replace the default magnifying glass.

--mantle-bgtheme default

CSS variable

Override the background color via style. e.g. style={{ "--mantle-bg": "#1a1a2e" }}

--mantle-bordertheme default

CSS variable

Override the border color via style. Set to "transparent" to remove. e.g. style={{ "--mantle-border": "#e94560" }}

--mantle-texttheme default

CSS variable

Override the text color via style. e.g. style={{ "--mantle-text": "#ffffff" }}

--mantle-ringaccent

CSS variable

Override the focus ring color via style. e.g. style={{ "--mantle-ring": "#e94560" }}