ComboBox

A combo box combines a text input with a listbox, allowing users to filter a list of options to items matching a query.

Usage#

Demo#

import { ComboBox, ComboBoxItem } from "pigment-ui";

function ComboBoxDemo() {
  return (
    <ComboBox label="Favorite Animal" description="Lorem ipsum dolor sit amet." className="w-64">
      <ComboBoxItem>Aardvark</ComboBoxItem>
      <ComboBoxItem>Cat</ComboBoxItem>
      <ComboBoxItem>Dog</ComboBoxItem>
      <ComboBoxItem>Kangaroo</ComboBoxItem>
      <ComboBoxItem>Panda</ComboBoxItem>
      <ComboBoxItem>Snake</ComboBoxItem>
    </ComboBox>
  );
}

Size#

import { ComboBox, ComboBoxItem } from "pigment-ui";

function ComboBoxSize() {
  const renderComboBoxContent = (
    <>
      <ComboBoxItem>Aardvark</ComboBoxItem>
      <ComboBoxItem>Cat</ComboBoxItem>
      <ComboBoxItem>Dog</ComboBoxItem>
      <ComboBoxItem>Kangaroo</ComboBoxItem>
      <ComboBoxItem>Panda</ComboBoxItem>
      <ComboBoxItem>Snake</ComboBoxItem>
    </>
  );

  return (
    <div className="flex flex-col gap-4">
      <ComboBox size="sm" label="Favorite Animal" description="Lorem ipsum dolor sit amet." className="w-64">
        {renderComboBoxContent}
      </ComboBox>

      <ComboBox size="md" label="Favorite Animal" description="Lorem ipsum dolor sit amet." className="w-64">
        {renderComboBoxContent}
      </ComboBox>

      <ComboBox size="lg" label="Favorite Animal" description="Lorem ipsum dolor sit amet." className="w-64">
        {renderComboBoxContent}
      </ComboBox>
    </div>
  );
}

Radius#

import { ComboBox, ComboBoxItem } from "pigment-ui";

function ComboBoxRadius() {
  const renderComboBoxContent = (
    <>
      <ComboBoxItem>Aardvark</ComboBoxItem>
      <ComboBoxItem>Cat</ComboBoxItem>
      <ComboBoxItem>Dog</ComboBoxItem>
      <ComboBoxItem>Kangaroo</ComboBoxItem>
      <ComboBoxItem>Panda</ComboBoxItem>
      <ComboBoxItem>Snake</ComboBoxItem>
    </>
  );

  return (
    <div className="flex flex-col gap-4">
      <ComboBox radius="sm" label="Favorite Animal" description="Lorem ipsum dolor sit amet." className="w-64">
        {renderComboBoxContent}
      </ComboBox>

      <ComboBox radius="md" label="Favorite Animal" description="Lorem ipsum dolor sit amet." className="w-64">
        {renderComboBoxContent}
      </ComboBox>

      <ComboBox radius="lg" label="Favorite Animal" description="Lorem ipsum dolor sit amet." className="w-64">
        {renderComboBoxContent}
      </ComboBox>
      
      <ComboBox radius="full" label="Favorite Animal" description="Lorem ipsum dolor sit amet." className="w-64">
        {renderComboBoxContent}
      </ComboBox>
      
      <ComboBox radius="none" label="Favorite Animal" description="Lorem ipsum dolor sit amet." className="w-64">
        {renderComboBoxContent}
      </ComboBox>
    </div>
  );
}

Content#

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

function ComboBoxContent() {
  return (
    <ComboBox startContent={<UserIcon />} endContent={<PinIcon />} label="Favorite Animal" description="Lorem ipsum dolor sit amet." className="w-64">
      <ComboBoxItem>Aardvark</ComboBoxItem>
      <ComboBoxItem>Cat</ComboBoxItem>
      <ComboBoxItem>Dog</ComboBoxItem>
      <ComboBoxItem>Kangaroo</ComboBoxItem>
      <ComboBoxItem>Panda</ComboBoxItem>
      <ComboBoxItem>Snake</ComboBoxItem>
    </ComboBox>
  );
}

Content item#

import { ComboBox, ComboBoxItem } from "pigment-ui";
import { CatIcon, DogIcon } from "lucide-react";

function ComboBoxContentItem() {
  return (
    <ComboBox label="Favorite Animal" description="Lorem ipsum dolor sit amet." className="w-64">
      <ComboBoxItem>Aardvark</ComboBoxItem>
      <ComboBoxItem startContent={<CatIcon />}>Cat</ComboBoxItem>
      <ComboBoxItem endContent={<DogIcon />}>Dog</ComboBoxItem>
      <ComboBoxItem>Kangaroo</ComboBoxItem>
      <ComboBoxItem>Panda</ComboBoxItem>
      <ComboBoxItem>Snake</ComboBoxItem>
    </ComboBox>
  );
}

Color#

import { ComboBox, ComboBoxItem } from "pigment-ui";

function ComboBoxColor() {
  const renderComboBoxContent = (
    <>
      <ComboBoxItem>Aardvark</ComboBoxItem>
      <ComboBoxItem>Cat</ComboBoxItem>
      <ComboBoxItem>Dog</ComboBoxItem>
      <ComboBoxItem>Kangaroo</ComboBoxItem>
      <ComboBoxItem>Panda</ComboBoxItem>
      <ComboBoxItem>Snake</ComboBoxItem>
    </>
  );

  return (
    <div className="flex flex-col gap-4">
      <ComboBox color="default" label={<div className="text-default-1000">Favorite Animal</div>} description="Lorem ipsum dolor sit amet." className="w-64">
        {renderComboBoxContent}
      </ComboBox>

      <ComboBox color="primary" label={<div className="text-primary-500">Favorite Animal</div>} description="Lorem ipsum dolor sit amet." className="w-64">
        {renderComboBoxContent}
      </ComboBox>

      <ComboBox color="info" label={<div className="text-info-500">Favorite Animal</div>} description="Lorem ipsum dolor sit amet." className="w-64">
        {renderComboBoxContent}
      </ComboBox>
      
      <ComboBox color="success" label={<div className="text-success-500">Favorite Animal</div>} description="Lorem ipsum dolor sit amet." className="w-64">
        {renderComboBoxContent}
      </ComboBox>
      
      <ComboBox color="warning" label={<div className="text-warning-500">Favorite Animal</div>} description="Lorem ipsum dolor sit amet." className="w-64">
        {renderComboBoxContent}
      </ComboBox>
      
      <ComboBox color="error" label={<div className="text-error-500">Favorite Animal</div>} description="Lorem ipsum dolor sit amet." className="w-64">
        {renderComboBoxContent}
      </ComboBox>
    </div>
  );
}

Color individual#

import { ComboBox, ComboBoxItem } from "pigment-ui";

function ComboBoxColorIndividual() {
  return (
    <ComboBox color="info" label="Favorite Animal" description="Lorem ipsum dolor sit amet." className="w-64">
      <ComboBoxItem>Aardvark</ComboBoxItem>
      <ComboBoxItem>Cat</ComboBoxItem>
      <ComboBoxItem>Dog</ComboBoxItem>
      <ComboBoxItem>Kangaroo</ComboBoxItem>
      <ComboBoxItem>Panda</ComboBoxItem>
      <ComboBoxItem color="success">Snake</ComboBoxItem>
    </ComboBox>
  );
}

Invalid#

import { ComboBox, ComboBoxItem } from "pigment-ui";

function ComboBoxInvalid() {
  return (
    <ComboBox isInvalid errorMessage="This is an error message." label="Favorite Animal" description="Lorem ipsum dolor sit amet." className="w-64">
      <ComboBoxItem>Aardvark</ComboBoxItem>
      <ComboBoxItem>Cat</ComboBoxItem>
      <ComboBoxItem>Dog</ComboBoxItem>
      <ComboBoxItem>Kangaroo</ComboBoxItem>
      <ComboBoxItem>Panda</ComboBoxItem>
      <ComboBoxItem>Snake</ComboBoxItem>
    </ComboBox>
  );
}

Disabled#

import { ComboBox, ComboBoxItem } from "pigment-ui";

function ComboBoxDisabled() {
  return (
    <ComboBox isDisabled label="Favorite Animal" description="Lorem ipsum dolor sit amet." className="w-64">
      <ComboBoxItem>Aardvark</ComboBoxItem>
      <ComboBoxItem>Cat</ComboBoxItem>
      <ComboBoxItem>Dog</ComboBoxItem>
      <ComboBoxItem>Kangaroo</ComboBoxItem>
      <ComboBoxItem>Panda</ComboBoxItem>
      <ComboBoxItem>Snake</ComboBoxItem>
    </ComboBox>
  );
}

Disabled individual#

import { ComboBox, ComboBoxItem } from "pigment-ui";

function ComboBoxDisabledIndividual() {
  return (
    <ComboBox disabledKeys={["Dog"]} label="Favorite Animal" description="Lorem ipsum dolor sit amet." className="w-64">
      <ComboBoxItem>Aardvark</ComboBoxItem>
      <ComboBoxItem>Cat</ComboBoxItem>
      <ComboBoxItem>Dog</ComboBoxItem>
      <ComboBoxItem>Kangaroo</ComboBoxItem>
      <ComboBoxItem>Panda</ComboBoxItem>
      <ComboBoxItem>Snake</ComboBoxItem>
    </ComboBox>
  );
}

Validation#

import { ComboBox, ComboBoxItem } from "pigment-ui";

function ComboBoxValidation() {
  return (
    <form className="space-y-4">
      <ComboBox isRequired label="Favorite Animal" description="Lorem ipsum dolor sit amet." className="w-64">
        <ComboBoxItem>Aardvark</ComboBoxItem>
        <ComboBoxItem>Cat</ComboBoxItem>
        <ComboBoxItem>Dog</ComboBoxItem>
        <ComboBoxItem>Kangaroo</ComboBoxItem>
        <ComboBoxItem>Panda</ComboBoxItem>
        <ComboBoxItem>Snake</ComboBoxItem>
      </ComboBox>
      <Button type="submit">Submit</Button>
    </form>
  );
}

Edit this page

ColorField DateField