Skip to main content
The Textarea component provides a multi-line text input field with automatic styling, focus states, and disabled state support.

​
Basic Usage

import reflex_ui as ui

ui.textarea(placeholder="Enter your message...")

​
Controlled State

class State(rx.State):
    message: str = ""

ui.textarea(
    value=State.message,
    on_change=State.set_message,
    placeholder="Type something..."
)

​
With Label

rx.vstack(
    rx.text("Description", font_weight="500"),
    ui.textarea(
        placeholder="Enter a detailed description",
        name="description"
    ),
    align_items="flex-start",
    spacing="0.5rem",
    width="100%"
)

​
Disabled State

ui.textarea(
    placeholder="This field is disabled",
    disabled=True
)

​
With Character Count

class State(rx.State):
    message: str = ""
    max_length: int = 280

    @rx.var
    def char_count(self) -> int:
        return len(self.message)

    @rx.var
    def remaining(self) -> int:
        return self.max_length - self.char_count

rx.vstack(
    ui.textarea(
        value=State.message,
        on_change=State.set_message,
        placeholder="What's on your mind?",
        max_length=State.max_length
    ),
    rx.text(
        f"{State.char_count} / {State.max_length}",
        font_size="0.875rem",
        color="gray.600",
        text_align="right",
        width="100%"
    ),
    spacing="0.5rem",
    width="100%"
)

​
Form Integration

class State(rx.State):
    form_data: dict = {}

    def handle_submit(self, form_data: dict):
        self.form_data = form_data
        rx.toast.success("Form submitted!")

rx.form(
    rx.vstack(
        ui.textarea(
            name="feedback",
            placeholder="Your feedback...",
            required=True
        ),
        ui.button("Submit", type="submit"),
        spacing="1rem",
        width="100%"
    ),
    on_submit=State.handle_submit,
    width="100%"
)

​
Props Reference

​
value
str
The controlled value of the textarea
​
on_change
EventHandler
Event handler called when the value changes
​
placeholder
str
Placeholder text shown when textarea is empty
​
disabled
bool
default:"False"
Disables the textarea when True
​
required
bool
default:"False"
Makes the textarea required in forms
​
name
str
Name attribute for form submission
​
rows
int
Number of visible text rows
​
max_length
int
Maximum number of characters allowed
​
class_name
str
Additional CSS classes for styling

​
Styling

From source code at reflex_ui/components/base/textarea.py:9-12:
  • Focus state: Blue ring and border color from primary scale
  • Border: Secondary color with hover state
  • Disabled state: Muted colors and not-allowed cursor
  • Height: Minimum 24 units (6rem), maximum 60rem
  • Resize: Disabled by default
  • Scrollbar: Auto appears when content exceeds max height
  • Font: Medium weight for better readability

​
Default Attributes

From source code at reflex_ui/components/base/textarea.py:21-28: The textarea automatically sets these attributes for better UX:
  • autoComplete="off" - Disables browser autocomplete
  • autoCapitalize="none" - Disables auto-capitalization
  • autoCorrect="off" - Disables auto-correction
  • spellCheck="false" - Disables spell checking (can be overridden)

​
Implementation Details

From source code at reflex_ui/components/base/textarea.py:15-35:
  • Extends Reflex’s base Textarea element
  • Automatically applies consistent styling
  • Custom attributes for better user experience
  • Supports all standard HTML textarea attributes
  • Focus management with visible focus ring

Build docs developers (and LLMs) love

Get started for freeTalk to us