TextArea

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

View component changelog

preview

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

Keyboard Interactions

Shortcut	Description
`Tab`	Moves focus to and from the textarea using the browser focus order.
`Shift + Tab`	Moves focus to the previous focusable element using the browser focus order.
`Enter`	Inserts a line break while focus is inside the textarea.

ARIA References

Reference	What Rad UI follows
Textbox role	Uses the native textarea element, which exposes a multiline textbox to assistive technology. The TextArea wrapper forwards disabled and placeholder, and maps readonly to readOnly; pass required, name, and other native form props to TextArea.Input when composing.

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

Edit this page on GitHub →