Textarea

Displays a form textarea or a component that looks like a textarea.

❯buridan add textarea

Component Guide

Use the following to build the Textarea component.

from components.ui.textarea import textarea

textarea()

Source Code & Dependencies

For manual installation, copy each of the source codes below in their respective locations.

components/core/core.py

components/ui/textarea.py

Examples

Basic

A standard multiline text input. Auto-grows with content via field-sizing-content.

Props used: none required beyond default textarea(...).

from components.ui.textarea import textarea


def textarea_basic_demo():
    return textarea(placeholder="Type your message here.", class_name="max-w-xs")

Field

Pair with field.root, field.label, and field.description for a structured, labeled field.

Props used: id on textarea; html_for on field.label.

from components.ui.field import field
from components.ui.textarea import textarea


def textarea_field():
    return field.root(
        field.label(
            "Message",
            html_for="textarea-message",
        ),
        field.description(
            "Enter your message below.",
        ),
        textarea(
            id="textarea-message",
            placeholder="Type your message here.",
        ),
        class_name="max-w-xs",
    )

Disabled

Use disabled on textarea. Add data_invalid/disabled state to field.root to propagate consistent visual styling across the label and description too.

Props used: disabled on textarea.

from components.ui.field import field
from components.ui.textarea import textarea


def textarea_disabled():
    return field.root(
        field.label(
            "Message",
            html_for="textarea-disabled",
        ),
        textarea(
            id="textarea-disabled",
            placeholder="Type your message here.",
            disabled=True,
        ),
        **{"data-disabled": True},
        class_name="max-w-xs",
    )

Invalid

Use aria_invalid on textarea to mark it invalid, and data_invalid="true" on field.root to style the whole field block accordingly.

Props used: aria_invalid on textarea; data_invalid on field.root.

from components.ui.field import field
from components.ui.textarea import textarea


def textarea_invalid():
    return field.root(
        field.label(
            "Message",
            html_for="textarea-invalid",
        ),
        textarea(
            id="textarea-invalid",
            placeholder="Type your message here.",
            **{"aria-invalid": True},
        ),
        field.description(
            "Please enter a valid message.",
        ),
        **{"data-invalid": True},
        class_name="max-w-xs",
    )

API Reference

textarea

Native browser autocomplete/spellcheck attributes are disabled by default (autoComplete, autoCapitalize, autoCorrect, spellCheck) — override via custom_attrs if you want them back for a specific field.

textarea(id="comment", placeholder="Leave a comment...")

Prop	Type	Default
`disabled`	`bool`	`False`
`aria_invalid`	`bool`	`False`
`value` / `default_value`	`str`
`id`	`str`
`name`	`str`
`on_change`	`EventHandler`
`class_name`	`str`	`""`

Any other prop accepted by a native <textarea> is also passed straight through.