Text Area Field

import { TextAreaField } from "@makeplane/propel/components/text-area-field";

export default function BasicDemo() {
  return (
    <TextAreaField
      magnitude="md"
      resize="vertical"
      label="Comment"
      placeholder="Leave a comment..."
      description="Share your thoughts on the proposal."
      hint="Markdown is supported."
    />
  );
}

import { TextAreaField } from "@makeplane/propel/components/text-area-field";

export default function MagnitudesDemo() {
  return (
    <div className="flex flex-col items-start gap-4">
      <TextAreaField magnitude="md" resize="vertical" label="md" placeholder="Leave a comment..." />
      <TextAreaField magnitude="lg" resize="vertical" label="lg" placeholder="Leave a comment..." />
      <TextAreaField magnitude="xl" resize="vertical" label="xl" placeholder="Leave a comment..." />
    </div>
  );
}

import { TextAreaField } from "@makeplane/propel/components/text-area-field";

export default function InvalidDemo() {
  return (
    <TextAreaField
      magnitude="md"
      resize="vertical"
      label="Comment"
      defaultValue="No"
      error="Add a little more detail."
      required
    />
  );
}

import { TextAreaField } from "@makeplane/propel/components/text-area-field";
import * as React from "react";

export default function ControlledDemo() {
  const [value, setValue] = React.useState("");

  return (
    <TextAreaField
      magnitude="md"
      resize="vertical"
      label="Comment"
      placeholder="Leave a comment..."
      value={value}
      onChange={(event) => setValue(event.target.value)}
      hint={`${value.length} characters`}
    />
  );
}