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.
ExpandCollapse
API Reference
rx.text_area
The input part of a TextArea, may be used by itself.
disabledsizevariantcolor_schemeradiusProps
| Prop | Type | Description |
|---|---|---|
access_key | str | Provides a hint for generating a keyboard shortcut for the current element. |
auto_capitalize | "off""none""on""sentences""words""characters" | Controls whether and how text input is automatically capitalized as it is entered/edited by the user. |
content_editable | "inherit""plaintext-only" | Indicates whether the element's content is editable. |
context_menu | str | Defines the ID of a <menu> element which will serve as the element's context menu. |
dir | str | Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left). |
draggable | bool | Defines whether the element can be dragged. |
enter_key_hint | "enter""done""go""next""previous""search""send" | Hints what media types the media element is able to play. |
hidden | bool | Defines whether the element is hidden. |
input_mode | "none""text""tel""url""email""numeric""decimal""search" | Defines the type of the element. |
item_prop | str | Defines the name of the element for metadata purposes. |
lang | str | Defines the language used in the element. |
role | "alert""alertdialog""application""article""banner""button""cell""checkbox""columnheader""combobox""complementary""contentinfo""definition""dialog""directory""document""feed""figure""form""grid""gridcell""group""heading""img""link""list""listbox""listitem""log""main""marquee""math""menu""menubar""menuitem""menuitemcheckbox""menuitemradio""navigation""none""note""option""presentation""progressbar""radio""radiogroup""region""row""rowgroup""rowheader""scrollbar""search""searchbox""separator""slider""spinbutton""status""switch""tab""table""tablist""tabpanel""term""textbox""timer""toolbar""tooltip""tree""treegrid""treeitem" | Defines the role of the element. |
slot | str | Assigns a slot in a shadow DOM shadow tree to an element. |
spell_check | bool | Defines whether the element may be checked for spelling errors. |
tab_index | int | Defines the position of the current element in the tabbing order. |
title | str | Defines a tooltip for the element. |
auto_complete | bool | Whether the form control should have autocomplete enabled. |
auto_focus | bool | Automatically focuses the textarea when the page loads. |
auto_height | bool | Automatically fit the content height to the text (use min-height with this prop). |
cols | Union[str, int] | Visible width of the text control, in average character widths. |
default_value | str | The default value of the textarea when initially rendered. |
dirname | str | Name part of the textarea to submit in 'dir' and 'name' pair when form is submitted. |
disabled | bool | Disables the textarea. |
enter_key_submit | bool | Enter key submits form (shift-enter adds new line). |
form | str | Associates the textarea with a form (by id). |
max_length | int | Maximum number of characters allowed in the textarea. |
min_length | int | Minimum number of characters required in the textarea. |
name | str | Name of the textarea, used when submitting the form. |
placeholder | str | Placeholder text in the textarea. |
read_only | bool | Indicates whether the textarea is read-only. |
required | bool | Indicates that the textarea is required. |
rows | str | Visible number of lines in the text control. |
value | str | The controlled value of the textarea, read only unless used with on_change. |
wrap | str | How the text in the textarea is to be wrapped when submitting the form. |
size | "1""2""3" | The size of the text area: "1" | "2" | "3". |
variant | "classic""surface""soft" | The variant of the text area. |
resize | "none""vertical""horizontal""both" | The resize behavior of the text area: "none" | "vertical" | "horizontal" | "both". |
color_scheme | "tomato""red""ruby""crimson""pink""plum""purple""violet""iris""indigo""blue""cyan""teal""jade""green""grass""brown""orange""sky""mint""lime""yellow""amber""gold""bronze""gray" | The color of the text area. |
radius | "none""small""medium""large""full" | The radius of the text area: "none" | "small" | "medium" | "large" | "full". |