Docs

Blog

Gallery

Resources

Learn

Components

API Reference

Onboarding

Library

/

Forms

/

Textarea

A text area is a multi-line text input field. This component uses Radix's text area component.

rx.text_area(
    placeholder="Type here...",
)

Hello World!

class TextAreaBlur(rx.State):
    text: str = "Hello World!"


def blur_example():
    return rx.vstack(
        rx.heading(TextAreaBlur.text),
        rx.text_area(
            on_blur=TextAreaBlur.set_text,
        ),
    )

Hello World!

class TextAreaControlled(rx.State):
    text: str = "Hello World!"


def controlled_example():
    return rx.vstack(
        rx.heading(TextAreaControlled.text),
        rx.text_area(
            value=TextAreaControlled.text,
            on_change=TextAreaControlled.set_text,
        ),
        rx.text_area(
            value="Simon says: " + TextAreaControlled.text,
        ),
    )

Are you enjoying Reflex?

Attach screenshot?

rx.card(
    rx.flex(
        rx.text("Are you enjoying Reflex?"),
        rx.text_area(placeholder="Write your feedback…"),
        rx.flex(
            rx.text("Attach screenshot?", size="2"),
            rx.switch(size="1", default_checked=True),
            justify="between",
        ),
        rx.grid(
            rx.button("Back", variant="surface"),
            rx.button("Send"),
            columns="2",
            spacing="2",
        ),
        direction="column",
        spacing="3",
    ),
    style={"maxWidth": 500},
)

The input part of a TextArea, may be used by itself.

PropTypeDescriptionValues
sizeLiteral

The size of the text area: "1" | "2" | "3"

variantLiteral

The variant of the text area

color_schemeLiteral

The color of the text area

auto_completebool

Whether the form control should have autocomplete enabled

auto_focusbool

Automatically focuses the textarea when the page loads

dirnamestr

Name part of the textarea to submit in 'dir' and 'name' pair when form is submitted

disabledbool

Disables the textarea

formUnion

Associates the textarea with a form (by id)

max_lengthint

Maximum number of characters allowed in the textarea

min_lengthint

Minimum number of characters required in the textarea

namestr

Name of the textarea, used when submitting the form

placeholderstr

Placeholder text in the textarea

read_onlybool

Indicates whether the textarea is read-only

requiredbool

Indicates that the textarea is required

rowsstr

Visible number of lines in the text control

valuestr

The controlled value of the textarea, read only unless used with on_change

wrapstr

How the text in the textarea is to be wrapped when submitting the form

Event Triggers

TriggerDescription
on_focus

Function or event handler called when the element (or some element inside of it) receives focus. For example, it is called when the user clicks on a text input.

on_blur

Function or event handler called when focus has left the element (or left some element inside of it). For example, it is called when the user clicks outside of a focused text input.

on_change

The on_change event handler is called when the value or checked state of the component changes.

on_key_down

The on_key_down event handler is called when the user presses a key.

on_key_up

The on_key_up event handler is called when the user releases a key.

← SwitchUpload →

Did you find this useful?

HomeGalleryChangelogIntroductionHosting