TextArea

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

Basic Example

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

Setting a value without using a State var

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

Real World Example

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

API Reference

TextArea

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

Prop	Type	Description
`size`	Literal	The size of the text area: "1" \| "2" \| "3"
`variant`	Literal	The variant of the text area
`color_scheme`	Literal	The color of the text area
`auto_complete`	bool	Whether the form control should have autocomplete enabled
`auto_focus`	bool	Automatically focuses the textarea when the page loads
`dirname`	str	Name part of the textarea to submit in 'dir' and 'name' pair when form is submitted
`disabled`	bool	Disables the textarea
`form`	Union	Associates the textarea with a form (by id)
`max_length`	int	Maximum number of characters allowed in the textarea
`min_length`	int	Minimum number of characters required in the textarea
`name`	str	Name of the textarea, used when submitting the form
`placeholder`	str	Placeholder text in the textarea
`read_only`	bool	Indicates whether the textarea is read-only
`required`	bool	Indicates that the textarea is required
`rows`	str	Visible number of lines in the text control
`value`	str	The controlled value of the textarea, read only unless used with on_change
`wrap`	str	How the text in the textarea is to be wrapped when submitting the form

Event Triggers

Trigger	Description
`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.

← Switch Upload →

Did you find this useful?

Yes

Raise an issue

Edit this page

Home Gallery Changelog Introduction Hosting

TextArea

Basic Example

Setting a value without using a State var

Real World Example

API Reference

TextArea