Reflex Logo

Intro

Gallery

Hosting

Learn

Components

Recipes

API Reference

Onboarding
Hosting

Library

/

Chakra

/

Forms

/

Textarea

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 rx.chakra.vstack(
        rx.chakra.heading(TextareaState.text),
        rx.chakra.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.

A text area component.

PropTypeDescriptionValues
valuestr

State var to bind the input.

default_valuestr

The default value of the textarea.

placeholderstr

The placeholder text.

error_border_colorstr

The border color when the input is invalid.

focus_border_colorstr

The border color when the input is focused.

is_disabledbool

If true, the form control will be disabled.

is_invalidbool

If true, the form control will be invalid.

is_read_onlybool

If true, the form control will be read-only.

is_requiredbool

If true, the form control will be required.

variantLiteral

"outline" | "filled" | "flushed" | "unstyled"

namestr

The name of the form field

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.

Did you find this useful?

HomeGalleryChangelogIntroductionHosting