New components library - Native UI

︲

︲

Textarea

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

Installation

Copy the following code into your app directory.

uv

uv run buridan add component textarea
from components.ui.component import textarea

Anatomy

Use the following composition to build a Textarea component.

textarea()

Examples

Basic

A standard multiline text area for general text input.

from components.ui.textarea import textarea


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

Field

Use field.root, field.label, and field.description together with a form control (such as textarea) to build a structured field with a label and helper text.

Enter your message below.

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 the disabled prop on textarea to disable user input. Apply data-disabled on field.root to propagate disabled styling to all field-related elements and ensure consistent visual state handling.

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 the aria-invalid prop to mark the textarea as invalid. To style the invalid state, add the data-invalid attribute to the field.root component.

Please enter a valid message.

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",
    )