Propel

Text Area Field

A labeled multi-line text field with optional description, hint, and error messaging.

Share your thoughts on the proposal.

Markdown is supported.

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

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

Installation

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

Usage

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

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

Examples

Sizes

size steps the value font-size and the field min-height; padding and radius stay fixed.

Show code
import { TextAreaField, type InputSize } from "@makeplane/propel/components/text-area-field";

const SIZES: InputSize[] = ["lg", "xl", "2xl"];

export default function SizesDemo() {
  return (
    <div className="flex flex-col items-start gap-4">
      {SIZES.map((size) => (
        <TextAreaField
          key={size}
          size={size}
          resize="vertical"
          label={size}
          placeholder="Leave a comment..."
        />
      ))}
    </div>
  );
}

Resize

The resize prop controls the native drag handle: vertical allows height changes, none locks the size. (both frees the width too, but a labeled field usually sits in a form column with no room to spare — see the bare Text Area for that case.)

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

export default function ResizeDemo() {
  return (
    <div className="flex flex-col gap-4">
      <TextAreaField
        size="lg"
        resize="vertical"
        label="Resize vertical"
        placeholder="Leave a comment..."
      />
      <TextAreaField size="lg" resize="none" label="Resize none" placeholder="Leave a comment..." />
    </div>
  );
}

Invalid

Setting error overrides hint, marks the field invalid (aria-invalid), and recolors the border to danger.

Add a little more detail.
Show code
import { TextAreaField } from "@makeplane/propel/components/text-area-field";

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

Controlled

0 characters

Show code
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
      size="lg"
      resize="vertical"
      label="Comment"
      placeholder="Leave a comment..."
      value={value}
      onChange={(event) => setValue(event.target.value)}
      hint={`${value.length} characters`}
    />
  );
}

API Reference

TextAreaField

Multi-line text field built on Base UI `Field`, rendering the control as a `<textarea>`. Vertical layout only.

PropTypeDefaultDescription
size(required)"lg" | "xl" | "2xl"—Size scale. `lg` | `xl` | `2xl`.
defaultValuestring | number | readonly string[]—The default value of the textarea. Use when uncontrolled.
requiredboolean—Marks the field required: adds a `*` asterisk and sets `required`.
valuestring | number | readonly string[]—The value of the textarea. Use when controlled.
resize"none" | "both" | "vertical""vertical"Native resize handle on the bordered frame.
labelstring—Label text shown above the control.
descriptionReactNode—Supporting text shown directly below the label.
hintReactNode—Helper text shown below the control. Replaced by `error` when an error is set.
errorReactNode—Error text shown below the control. Overrides `hint` and marks the field invalid (danger border).