Docs

Blog

Gallery

Resources

Learn

Components

API Reference

Onboarding

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

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.

Did you find this useful?

HomeGalleryChangelogIntroductionHosting