ColorField

Provides the behavior and accessibility implementation for a color field component. Color fields allow users to enter and adjust a hex color value.

Source Reference API Reference

Usage#

Demo#

import { ColorField } from "pigment-ui";

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

Size#

import { ColorField } from "pigment-ui";

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

Radius#

import { ColorField } from "pigment-ui";

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

Content#

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

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

Invalid#

import { ColorField } from "pigment-ui";

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

Disabled#

import { ColorField } from "pigment-ui";

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

Validation#

import { Button, ColorField } from "pigment-ui";

function ColorFieldValidation() {
  return (
    <form className="space-y-4">
      <ColorField isRequired label="Color" description="Lorem ipsum dolor sit amet." className="w-64" />
      <Button type="submit">Submit</Button>
    </form>
  );
}

Edit this page

Chip ComboBox