Search field

• Type: Component (inputs)
• Access: Free, open source
• Page: https://ui.xzero.co.uk/components/search-field
• Markdown: https://ui.xzero.co.uk/components/search-field/markdown
• Registry item: https://mcp.xzero.co.uk/r/search-field.json
• Source file: registry/components/search-field/search-field.tsx
• Dependencies: motion, lucide-react
• Keywords: field, search, react search input, search field, search bar with clear button, filter input, list filter search

When to use

• Filtering a visible list or table in place.
• Toolbar search where the query should be clearable with one click.

When not to use

• Use expanding-search for compact header search with results.
• Use combobox when the search sets a form value.
• Use filter-toolbar when search sits with other filters and sort.

Installation

Register both Xzero UI namespaces in your project's components.json:

{
  "registries": {
    "@xzero-ui": "https://mcp.xzero.co.uk/r/{name}.json",
    "@xzero-ui-pro": "https://mcp.xzero.co.uk/r/pro/{name}.json"
  }
}

npx shadcn@4.23.0 add @xzero-ui/search-field

Install xzero-foundation once, and import @/components/xzero/foundation.css in your app root. No Xzero token is used by this snapshot. For sample portraits, photos, fonts, or logos, download https://mcp.xzero.co.uk/install-assets.mjs and run node xzero-install-assets.mjs <receiving-project>.

Usage

import { SearchField } from "@/components/xzero/search-field/search-field";

export function MemberFilter() {
  const [query, setQuery] = useState("");
  return (
    <SearchField
      label="Search members"
      placeholder="Name or email"
      value={query}
      onValueChange={setQuery}
    />
  );
}

API reference

SearchField

A controlled search input with a clear button that scales in inside a reserved slot.

Prop	Type	Default	Description
label (required)	string	–	Visible label tied to the input.
value (required)	string	–	Current query.
onValueChange (required)	(value: string) => void	–	Called on every keystroke and with an empty string when cleared.
...props	Omit<InputHTMLAttributes<HTMLInputElement>, "type">	–	Forwarded to the input, including ref, placeholder, and name.

Keyboard interactions

Keys	Action
Escape	Clears the field (native type="search" behavior in most browsers).

Accessibility

• Native input type="search" with a real label.
• Clear button is labelled "Clear search" and returns focus to the input.
• The search icon is aria-hidden.

Motion

• The clear button scales in from 0.8 with a slight blur on a snappy spring and presses to 0.96.
• Reduced motion fades it in and out without scale or blur; the reserved slot keeps the field width fixed either way.

Responsive behavior

• The clear button has a reserved slot, so the field width never shifts when it appears.
• It fills its column with min-width 0 and shrinks inside narrow toolbars.

Performance

• onValueChange fires on every keystroke; debounce expensive filtering or fetching yourself.

Notes for AI

• Use to filter a visible list in place. Use expanding-search for a compact header search with results, and combobox to choose a value.
• Always controlled: pass value and onValueChange, and debounce expensive filtering yourself.

Related

• Expanding search: An icon that morphs into a search field with results beneath it.
• Combobox: Search and select from a list without leaving the field.
• Filter toolbar: Keep collection filters close and easy to reset.

Also in text fields

• Input: A single line field with clear labels and useful states.
• Textarea: A multiline field for notes, descriptions, and longer text.
• Password field: Capture sensitive text with a visible reveal control.
• Password strength: Show how strong a new password is while it is typed.
• Inline edit: Rename in place: the text becomes a field without moving.

Guidance for AI tools

Search field: A recognizable search entry point with clear affordances. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://ui.xzero.co.uk/llms.txt