Reflex Build -

Library

/

Forms

/

Text Area

Text Area

A text area is a multi-line text input field.

Basic Example

The text area component can be controlled by a single value. The on_blur prop can be used to update the value when the text area loses focus.

Hello World!

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


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

Text Area in forms

Here we show how to use a text area in a form. We use the name prop to identify the text area in the form data. The form data is then passed to the submit_feedback method to be processed.

Are you enjoying Reflex?

class TextAreaFeedbackState(rx.State):
    feedback: str = ""
    submitted: bool = False

    @rx.event
    def submit_feedback(self, form_data: dict):
        self.submitted = True

    @rx.event
    def reset_form(self):
        self.feedback = ""
        self.submitted = False


def feedback_form():
    return rx.cond(
        TextAreaFeedbackState.submitted,
        rx.card(
            rx.vstack(
                rx.text("Thank you for your feedback!"),
                rx.button(
                    "Submit another response",
                    on_click=TextAreaFeedbackState.reset_form,
                ),
            ),
        ),
        rx.card(
            rx.form(
                rx.flex(
                    rx.text("Are you enjoying Reflex?"),
                    rx.text_area(
                        placeholder="Write your feedback…",
                        value=TextAreaFeedbackState.feedback,
                        on_change=TextAreaFeedbackState.set_feedback,
                        resize="vertical",
                    ),
                    rx.button("Send", type="submit"),
                    direction="column",
                    spacing="3",
                ),
                on_submit=TextAreaFeedbackState.submit_feedback,
            ),
        ),
    )

API Reference

rx.text_area

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

PropType | ValuesDefaultInteractive
size
"1" | "2" | ...
variant
"classic" | "surface" | ...
resize
"none" | "vertical" | ...
color_scheme
"tomato" | "red" | ...
radius
"none" | "small" | ...
auto_complete
bool
auto_focus
bool
default_value
str
dirname
str
disabled
bool
form
str
max_length
int
min_length
int
name
str
placeholder
str
read_only
bool
required
bool
rows
str
value
str
wrap
str

Event Triggers

See the full list of default event triggers
TriggerDescription
on_focusFunction 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_blurFunction 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_changeFunction or event handler called when the value of an element has changed. For example, it is called when the user types into a text input each keystroke triggers the on change.
on_key_downThe on_key_down event handler is called when the user presses a key.
on_key_upThe on_key_up event handler is called when the user releases a key.

Built with Reflex