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=""
        value=""
        onChange={(event: React.ChangeEvent<HTMLTextAreaElement>) => {}}
      />
    </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

Examples

Controlled

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

Disabled

Label, placeholder, help text

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

Error

Use error and helpText props for validating the entire group.