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 TextAreaFieldSize,
} from "@makeplane/propel/components/text-area-field";

const SIZES: TextAreaFieldSize[] = ["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>
  );
}

Auto resize

autoResize grows the field with its value (size min-height as the floor) and turns the native resize handle off. maxRows caps the visible lines; further content scrolls.

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

export default function AutoResizeDemo() {
  return (
    <TextAreaField
      size="lg"
      autoResize
      maxRows={8}
      rows={2}
      label="Comment"
      placeholder="Type to grow the field…"
    />
  );
}

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. autoResize grows the control with its value and disables the native resize handle.

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 aria-required. The native required attribute is deliberately not rendered, so browser constraint validation never intercepts form submits ahead of the app's own validation.
valuestring | number | readonly string[]—The value of the textarea. Use when controlled.
autoResizebooleanfalseGrow the control with its value, using the size min-height as the floor. Pair the field surface with TextAreaGroup resize="none" so the native drag handle does not fight content-driven height. Grow the control with its value, using the size min-height as the floor. Disables the native resize handle.
maxRowsnumber—Maximum visible lines when autoResize is set. Further lines scroll inside the control. Unbounded when omitted.
resize"none" | "both" | "vertical""vertical"Native resize handle on the bordered frame. Forced to none when autoResize is set, so the drag handle does not fight content-driven height.
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).