Skip to content
MIZU.

SearchField

Search with a clear action that belongs to the input.

Live — this one is real

Usage

import { useState } from "react";
import { SearchField } from "mizu-ui";

export function Example() {
  const [query, setQuery] = useState("");
  return (
    <SearchField
      value={query}
      onValueChange={setQuery}
      label="Find a component"
    />
  );
}

Source & setup

Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.

Inspect forms/Fields.tsx

Source is included in the npm package under src/forms/Fields.tsx.

Open full source ↗

Props

PropTypeDefaultDescription
valuestring—Controlled query.
onValueChange(value: string) => void—Typing and clear events.
labelstring"Search"Input label.

Accessibility

Uses input type=search and a separately named clear button. Does not impose a search algorithm.

Motion

CSS transitions explain state changes. Reduced motion removes travel.

Works alongside

FormFieldTextFieldTextAreaSelectField