Text Area

A text area is a multi-line text input field.

Basic Example

The text area component can be controlled by a single value. The on_blur prop can be used to update the value when the text area loses focus.

Hello World!

Text Area in forms

Here we show how to use a text area in a form. We use the name prop to identify the text area in the form data. The form data is then passed to the submit_feedback method to be processed.

API Reference

rx.text_area

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

Prop	Type \| Values	Interactive
`size`	`"1" \| "2" \| ...`
`variant`	`"classic" \| "surface" \| ...`
`resize`	`"none" \| "vertical" \| ...`
`color_scheme`	`"tomato" \| "red" \| ...`
`radius`	`"none" \| "small" \| ...`
`auto_complete`	`bool`	false
`auto_focus`	`bool`	false
`default_value`	`str`
`dirname`	`str`
`disabled`	`bool`	false
`form`	`str`
`max_length`	`int`
`min_length`	`int`
`name`	`str`
`placeholder`	`str`
`read_only`	`bool`	false
`required`	`bool`	false
`rows`	`str`
`value`	`str`
`wrap`	`str`

Event Triggers

See the full list of default 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`	Function or event handler called when the value of an element has changed. For example, it is called when the user types into a text input each keystroke triggers the on change.
`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.