Textarea

Отображает текстовую область формы или компонент, похожий на текстовую область.

❯buridan add textarea

Error: Reference Target 'текстовая область' not found

Примеры

Базовый

Стандартный многострочный ввод текста. Автоматически расширяется вместе с контентом через field-sizing-content.

Использованный реквизит: ничего не требуется, кроме textarea(...) по умолчанию.

from components.ui.textarea import textarea


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

Поле

В сочетании с field.root, field.label и field.description для получения структурированного помеченного поля.

Использованный реквизит: id на textarea; html_for на field.label.

Error: Reference Target 'текстовое_поле' not found

Отключено

Используйте disabled для textarea. Добавьте состояние data_invalid/disabled к field.root, чтобы распространить единообразный визуальный стиль на метку и описание.

Использованный реквизит: disabled на 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",
    )

Неверно

Используйте aria_invalid в textarea, чтобы пометить его как недействительный, и data_invalid="true" в field.root, чтобы соответствующим образом стилизовать весь блок поля.

Использованный реквизит: aria_invalid на textarea; data_invalid на 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

текстовая область

Встроенные атрибуты автозаполнения/проверки орфографии в браузере отключены по умолчанию (autoComplete, autoCapitalize, autoCorrect, spellCheck) — переопределите их с помощью custom_attrs, если вы хотите вернуть их для определенного поля.

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

Опора	Тип	По умолчанию
`disabled`	`bool`	`False`
`aria_invalid`	`bool`	`False`
`value` / `default_value`	`str`
`id`	`str`
`name`	`str`
`on_change`	`EventHandler`
`class_name`	`str`	`""`

Любой другой реквизит, принятый нативным <textarea>, также передается напрямую.

External Tools

︲

On This Page