Forms

Search Field

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

Sourcesrc/components/ui/search-field.tsx

Import

import { SearchField } from "@mikenotthepope/substrateui"

Labels

The clear button is an icon with no text, and the placeholder is the field's only visible hint. Override one instance with the labels prop on the component, or every instance at once through LabelsProvider's searchField key — the provider is how you translate the set once instead of at each call site.

Prop	Type	Default	Description
`placeholder`	`string`	`"Search..."`	Placeholder text. Not a label — pair the field with a real one.
`clearSearch`	`string`	`"Clear search"`	Accessible name for the clear button.

API Reference

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.