Components

SearchInput

Search inputs are useful when searching through content

Examples

A basic search input

<SearchInput label="Seach" />

A controlled search input

() => {
  const [query, setQuery] = React.useState("");
  return (
    <SearchInput 
      label="Search" 
      value={query}
      onChange={e => setQuery(e.target.value)}
    />
  );
}

A search input with a reset button

() => {
  const [query, setQuery] = React.useState("");
  return (
    <SearchInput 
      label="Search" 
      value={query}
      onChange={e => setQuery(e.target.value)}
      onReset={() => setQuery("")}
    />
  );
}

Different variants

<Stack gap={3}>
  <SearchInput label="Base" />
  <SearchInput label="Floating" variant="floating" />
</Stack>