logo
DocsThemes

Select

A select displays a collapsible list of options and allows a user to select one of them.

SourceReferenceAPI Reference

Usage#

Demo#

import { Select, SelectItem } from "pigment-ui";

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

Size#

import { Select, SelectItem } from "pigment-ui";

function SelectSize() {
  const renderSelectContent = (
    <>
      <SelectItem>Aardvark</SelectItem>
      <SelectItem>Cat</SelectItem>
      <SelectItem>Dog</SelectItem>
      <SelectItem>Kangaroo</SelectItem>
      <SelectItem>Panda</SelectItem>
      <SelectItem>Snake</SelectItem>
    </>
  );

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

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

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

Radius#

import { Select, SelectItem } from "pigment-ui";

function SelectRadius() {
  const renderSelectContent = (
    <>
      <SelectItem>Aardvark</SelectItem>
      <SelectItem>Cat</SelectItem>
      <SelectItem>Dog</SelectItem>
      <SelectItem>Kangaroo</SelectItem>
      <SelectItem>Panda</SelectItem>
      <SelectItem>Snake</SelectItem>
    </>
  );

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

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

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

Content#

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

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

Content item#

import { Select, SelectItem } from "pigment-ui";
import { CatIcon, DogIcon } from "lucide-react";

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

Color#

import { Select, SelectItem } from "pigment-ui";

function SelectColor() {
  const renderSelectContent = (
    <>
      <SelectItem>Aardvark</SelectItem>
      <SelectItem>Cat</SelectItem>
      <SelectItem>Dog</SelectItem>
      <SelectItem>Kangaroo</SelectItem>
      <SelectItem>Panda</SelectItem>
      <SelectItem>Snake</SelectItem>
    </>
  );

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

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

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

Color individual#

import { Select, SelectItem } from "pigment-ui";

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

Invalid#

import { Select, SelectItem } from "pigment-ui";

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

Disabled#

import { Select, SelectItem } from "pigment-ui";

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

Disabled individual#

import { Select, SelectItem } from "pigment-ui";

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

Validation#

import { Select, SelectItem } from "pigment-ui";

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