Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

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,
        ),
    )

Set the value of the specified reference element, without needing to link it up to a State var. This is an alternate way to modify the value of the text_area.

rx.hstack(
    rx.text_area(id="text1"),
    rx.button("Erase", on_click=rx.set_value("text1", "")),
)

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
sizeUnion

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

variantLiteral

The variant of the text area

resizeUnion

The resize behavior of the text area: "none" | "vertical" | "horizontal" | "both"

color_schemeLiteral

The color of the text area

radiusLiteral

The radius of the text area: "none" | "small" | "medium" | "large" | "full"

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

Fired when the textarea is focused.

on_blur

Fired when the textarea is blurred.

on_change

Fired when the value of the textarea changes.

on_key_down

Fired when a key is pressed down.

on_key_up

Fired when a key is released.

← SwitchUpload →

Did you find this useful?

HomeGalleryChangelogIntroductionHosting