SearchField

import { SearchField } from "@fanvue/ui";
import type { SearchFieldProps, SearchFieldSize } from "@fanvue/ui";

import { SearchField } from "@fanvue/ui";

<SearchField placeholder="Search..." />

import { SearchField } from "@fanvue/ui";

<SearchField label="Search" placeholder="Enter search terms" />

import { SearchField } from "@fanvue/ui";

<div className="flex w-[375px] flex-col gap-4">
  <SearchField size="48" label="Size 48" placeholder="Search..." />
  <SearchField size="40" label="Size 40" placeholder="Search..." />
  <SearchField size="32" label="Size 32" placeholder="Search..." />
  <SearchField label="With helper" placeholder="Search..." helperText="Type to search" />
  <SearchField
    label="Error"
    placeholder="Search..."
    error
    errorMessage="Search query is too short"
  />
  <SearchField label="Disabled" placeholder="Search..." disabled />
</div>

import { SearchField } from "@fanvue/ui";

<div className="flex w-[200px] flex-col gap-6">
  <SearchField
    placeholder="Search..."
    defaultValue="https://www.example.com/very/long/url/that/should/not/overflow/the/container/boundary"
  />
  <SearchField
    label="With label"
    placeholder="Search..."
    size="32"
    defaultValue="https://www.example.com/very/long/url/that/should/not/overflow/the/container/boundary"
  />
</div>

import { useState } from "react";
import { SearchField } from "@fanvue/ui";

function Example() {
  const [value, setValue] = useState("test query");

  return (
    <SearchField
      label="Search"
      placeholder="Search..."
      value={value}
      onChange={(e) => setValue(e.target.value)}
      onClear={() => setValue("")}
    />
  );
}