TextArea

Name: Rad UI
Author: Rad UI Team

A multi-line text input. Use it directly for simple cases, or compose with TextArea.Root and TextArea.Input for custom layouts.

React
"use client"

import TextArea from "@radui/ui/TextArea"

const TextAreaExample = () => {
    return (
        <div className="w-full max-w-[400px] space-y-4">
            <TextArea
                id="message-textarea"
                placeholder="Type your message here."
            />
            <TextArea
                placeholder="Disabled textarea"
                disabled
            />
        </div>
    )
}

export default TextAreaExample

API Documentation

Anatomy

Import all parts of the component and piece them together

React
import TextArea from "@radui/ui/TextArea"

export default () => {
    return (
        <TextArea.Root>
            <TextArea.Input placeholder="..." />
        </TextArea.Root>
    )
}

Root

The root container for the TextArea.

Prop	Type	Default
customRootClass	string	""
className	string	""

Input

The textarea input element.

Prop	Type	Default
placeholder	string	""
disabled	boolean	false
readOnly	boolean	false