Text Area

Displays a multiline text field with an optional label.

Properties

error

variant

label

helpText

Example

Source Code

Installation

"use client";

import React from "react";
import { TextArea } from "@/subframe/components/TextArea";

function TextAreaExample() {
  return (
    <TextArea error={false} variant="outline" label="" helpText="">
      <TextArea.Input
        className="h-auto min-h-[96px] w-full flex-none"
        placeholder=""
      />
    </TextArea>
  );
}

export default TextAreaExample;

Props

Text Area

Input

Prop

Type

Default

Additional info

error

boolean

false

variant

"outline" | "filled"

"outline"

label

string

""

helpText

string

""

children

React.ReactNode

—

This component is a <label>. Props like onClick and className will continue to work here.

Examples

Controlled

Use value and onChange props to control the displayed text or to set its initial value.


View code

Disabled


View code

Label, placeholder, help text

Use label, placeholder, and helpText props for additional information.


View code

Error

Use error and helpText props for validating the entire group.


View code