TextArea

import { TextArea } from "pigment-ui";

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

import { TextArea } from "pigment-ui";

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

import { TextArea } from "pigment-ui";

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

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

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

import { TextArea } from "pigment-ui";

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

import { TextArea } from "pigment-ui";

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

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

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