The TextArea component allows you to easily create multi-line text inputs.

Hello World!

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


def textarea_example():
    return rc.vstack(
        rc.heading(TextareaState.text),
        rc.text_area(
            value=TextareaState.text,
            on_change=TextareaState.set_text,
        ),
    )

Alternatively, you can use the on_blur event handler to only update the state when the user clicks away.

Similar to the Input component, the TextArea is also implemented using debounced input when it is fully controlled. You can tune the debounce delay by setting the debounce_timeout prop. You can find examples of how it is used in the DebouncedInput component.

rc.TextArea

A text area component.

PropType | ValuesDefault
value
str
default_value
str
placeholder
str
error_border_color
str
focus_border_color
str
is_disabled
bool
is_invalid
bool
is_read_only
bool
is_required
bool
variant
"outline" | "filled" | "flushed" | ...
name
str

Event Triggers

See the full list of default event triggers
TriggerDescription
on_focus Fired when the textarea gets focus.
on_blur Fired when the textarea loses focus.
on_change Fired when the value changes.
on_key_down Fired when a key is pressed down.
on_key_up Fired when a key is released.