#SearchInput

Source | Original component

A search input: the search form of TextInput, with a clear indicator appearing when the value is non-empty — click it to clear.

#Basic usage

import { useState } from "react";
import { SearchInput } from "ooui-react";

function App() {
  const [query, setQuery] = useState("");

  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12, maxWidth: 320 }}>
      <SearchInput value={query} onChange={setQuery} placeholder="Search entries…" />
      <div>Query: {query || "(empty)"}</div>
      <SearchInput defaultValue="OOUI widgets" />
    </div>
  );
}

export default App;

Because the field already holds a value, a × clear indicator shows on the right; clearing the value removes it again.

#With labels and soft validation

label, labelPosition, invisibleLabel, validate and the rest follow TextInput's semantics.

import { SearchInput } from "ooui-react";

function App() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 12, maxWidth: 320 }}>
      <SearchInput label="Keyword" labelPosition="before" validate="non-empty" placeholder="Required example" />
    </div>
  );
}

export default App;

#Where props land

Same as TextInput: ...rest lands on the root <div>, props for the native <input> go through inputProps, and inputRef focuses the input. The clear indicator is taken over by the component, so type (always search), indicator and indicatorProps are not exposed.

#API

Only the differences from TextInput are listed; the rest are in TextInput · API.

Unsupported props: type (always search), indicator / indicatorProps (the indicator slot is taken over by the clear logic).

#See also

• The base single-line input's full capabilities (types, soft validation, prop placement): TextInput
• Search with a results list: SearchWidget
• How values flow between the component and your state: Controlled and uncontrolled