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.

API Reference

TextArea

A text area component.

Prop	Type	Default Value	Values
`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`	Literal
`name`	str

Event Triggers

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

No

Yes

Raise an issue

Edit this page

Home Gallery Changelog Introduction Hosting

Textarea

API Reference

TextArea