Search input

import { SearchInput } from "@gpuixui/components/search-input";
import { Text } from "@gpuixui/primitives";
import { useState } from "react";

export const FileFilter = () => {
  const [query, setQuery] = useState("");
  const [last, setLast] = useState("none");

  return (
    <>
      <SearchInput
        aria-label="Filter files"
        placeholder="Filter files…"
        value={query}
        onValueChange={setQuery}
        onSubmit={setLast}
        onClear={() => setQuery("")}
      />
      <Text role="caption">Last submitted: {last}</Text>
    </>
  );
};

SearchInput
├── leading mark
├── input
└── clear control