SearchField

A controlled search input with a leading search icon and a clear button that fades in once there is text.

When to use

• Filtering a list, table or file view in place.
• Page-level search boxes where clearing should return focus to the field.
• For choosing one option from a list use Combobox; for a global command palette use CommandPalette.

Usage

import { SearchField } from "@/components/iris/search-field/search-field";
function FileSearch() {
  const [query, setQuery] = React.useState("");
  return h(SearchField, {
    label: "Search files",
    placeholder: "Search names and contents",
    value: query,
    onValueChange: setQuery,
  });
}

Props

Prop	Type	Default	Description
label	string	required	Visible label above the field.
value	string	required	Current query (always controlled).
onValueChange	(value: string) => void	required	Called on every change and with "" on clear.
...props	InputHTMLAttributes<HTMLInputElement> (minus type)	–	Forwarded to the type="search" input (ref, placeholder, name…).

Notes

• The clear button ("Clear search") has a reserved slot so the field never changes width, and clearing moves focus back to the input.
• Reduced motion swaps the button's scale and blur for a plain fade.
• Reads --surface, --line-strong, --ink, --ink-3, --hover, --radius-control, --radius-button.