SearchField

A search field allows a user to enter and clear a search query.

Usage#

Demo#

import { SearchField } from "pigment-ui";

function SearchFieldDemo() {
  return <SearchField label="Search" description="Lorem ipsum dolor sit amet." className="w-64" />;
}

Size#

import { SearchField } from "pigment-ui";

function SearchFieldSize() {
  return (
    <div className="flex flex-col gap-4">
      <SearchField size="sm" label="Search" description="Lorem ipsum dolor sit amet." className="w-64" />
      <SearchField size="md" label="Search" description="Lorem ipsum dolor sit amet." className="w-64" />
      <SearchField size="lg" label="Search" description="Lorem ipsum dolor sit amet." className="w-64" />
    </div>
  );
}

Radius#

import { SearchField } from "pigment-ui";

function SearchFieldRadius() {
  return (
    <div className="flex flex-col gap-4">
      <SearchField radius="sm" label="Search" description="Lorem ipsum dolor sit amet." className="w-64" />
      <SearchField radius="md" label="Search" description="Lorem ipsum dolor sit amet." className="w-64" />
      <SearchField radius="lg" label="Search" description="Lorem ipsum dolor sit amet." className="w-64" />
      <SearchField radius="full" label="Search" description="Lorem ipsum dolor sit amet." className="w-64" />
      <SearchField radius="none" label="Search" description="Lorem ipsum dolor sit amet." className="w-64" />
    </div>
  );
}

Content#

import { Button } from "pigment-ui";
import { PinIcon, UserIcon } from "lucide-react";

function SearchFieldContent() {
  return <SearchField startContent={<UserIcon />} endContent={<PinIcon />} label="Search" description="Lorem ipsum dolor sit amet." className="w-64" />;
}

Invalid#

import { SearchField } from "pigment-ui";

function SearchFieldInvalid() {
  return <SearchField isInvalid errorMessage="This is an error message." label="Search" description="Lorem ipsum dolor sit amet." className="w-64" />;
}

Disabled#

import { SearchField } from "pigment-ui";

function SearchFieldDisabled() {
  return <SearchField isDisabled label="Search" description="Lorem ipsum dolor sit amet." className="w-64" />;
}

Edit this page

RangeCalendar Select