Text Area

import { TextArea, TextAreaGroup } from "@makeplane/propel/components/text-area";

export default function BasicDemo() {
  return (
    <TextAreaGroup>
      <TextArea
        magnitude="md"
        surface="field"
        resize="vertical"
        aria-label="Comment"
        placeholder="Leave a comment..."
        rows={4}
      />
    </TextAreaGroup>
  );
}

import { TextArea, TextAreaGroup } from "@makeplane/propel/components/text-area";

const MAGNITUDES = ["sm", "md", "lg", "xl"] as const;

export default function MagnitudesDemo() {
  return (
    <div className="flex flex-col gap-4">
      {MAGNITUDES.map((magnitude) => (
        <TextAreaGroup key={magnitude}>
          <TextArea
            magnitude={magnitude}
            surface="field"
            resize="vertical"
            rows={2}
            aria-label={`Comment (${magnitude})`}
            defaultValue={`The ${magnitude} magnitude sizes the value text.`}
          />
        </TextAreaGroup>
      ))}
    </div>
  );
}

import { TextArea, TextAreaGroup } from "@makeplane/propel/components/text-area";

const RESIZES = ["none", "vertical", "both"] as const;

const RESIZE_COPY = {
  none: "No resize handle — the textarea keeps its size.",
  vertical: "Drag the corner handle to grow the textarea vertically.",
  both: "Drag the corner handle to grow the textarea in both directions.",
} as const;

export default function ResizeDemo() {
  return (
    <div className="flex flex-col gap-4">
      {RESIZES.map((resize) => (
        <TextAreaGroup key={resize}>
          <TextArea
            magnitude="md"
            surface="field"
            resize={resize}
            rows={2}
            aria-label={`Comment (resize ${resize})`}
            defaultValue={RESIZE_COPY[resize]}
          />
        </TextAreaGroup>
      ))}
    </div>
  );
}

import { Field, FieldDescription, FieldLabel } from "@makeplane/propel/components/field";
import { TextArea, TextAreaGroup } from "@makeplane/propel/components/text-area";

export default function WithDescriptionDemo() {
  return (
    <Field name="summary">
      <FieldLabel magnitude="md" inset={false}>
        Project summary
      </FieldLabel>
      <TextAreaGroup>
        <TextArea
          magnitude="md"
          surface="field"
          resize="vertical"
          rows={3}
          placeholder="Describe what this project is about..."
        />
      </TextAreaGroup>
      <FieldDescription magnitude="md">Visible to everyone in the workspace.</FieldDescription>
    </Field>
  );
}