/

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	Default	Interactive
`access_key`	`str`	`-`
`auto_capitalize`	`"off" \| "none" \| ...`	`-`
`content_editable`	`Union["inherit" \| "plaintext-only", bool]`	`-`
`context_menu`	`str`	`-`
`dir`	`str`	`-`
`draggable`	`bool`	`-`	false
`enter_key_hint`	`"enter" \| "done" \| ...`	`-`
`hidden`	`bool`	`-`	false
`input_mode`	`"none" \| "text" \| ...`	`-`
`item_prop`	`str`	`-`
`lang`	`str`	`-`
`role`	`"alert" \| "alertdialog" \| ...`	`-`
`slot`	`str`	`-`
`spell_check`	`bool`	`-`	false
`tab_index`	`int`	`-`
`title`	`str`	`-`
`auto_complete`	`bool`	`-`	false
`auto_focus`	`bool`	`-`	false
`auto_height`	`bool`	`-`	false
`cols`	`Union[str, int]`	`-`
`default_value`	`str`	`-`
`dirname`	`str`	`-`
`disabled`	`bool`	`-`	false
`enter_key_submit`	`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`	`-`
`size`	`"1" \| "2" \| ...`	`-`
`variant`	`"classic" \| "surface" \| ...`	`-`
`resize`	`"none" \| "vertical" \| ...`	`-`
`color_scheme`	`"tomato" \| "red" \| ...`	`-`
`radius`	`"none" \| "small" \| ...`	`-`

Event Triggers

See the full list of default event triggers

Trigger	Description
`on_change`	Fired when the input value changes.
`on_key_down`	Fired when a key is pressed down.
`on_key_up`	Fired when a key is released.