basecoat/docs/src/components/textarea.md

templateEngineOverride, layout, title, description, toc

templateEngineOverride	layout	title	description	toc
njk	layouts/page.njk	Textarea	Displays a form textarea or a component that looks like a textarea.	label id Usage usage label id children Examples examples label id Field example-field label id Disabled example-disabled label id Invalid example-invalid label id Button example-button label id Form example-form label id RTL example-rtl

{% from "macros/code_preview.njk" import code_preview %} {% from "macros/code_block.njk" import code_block %}

{% set code %}{% endset %} {{ code_preview("textarea", code, class="w-full max-w-xs") }}

Usage

Add the textarea class to a <textarea> element. Textareas inside a form or field container also receive the same styling automatically.

Use native HTML attributes for behavior: disabled for disabled textareas and aria-invalid="true" for invalid state styling.

{{ code_block(code) }}

Examples

Field

Use field with a label and description to create an accessible textarea.

{% set code_field %}

Message

Write a short message.

{% endset %} {{ code_preview("textarea-field", code_field, class="w-full max-w-xs") }}

Disabled

{% set code_disabled %}{% endset %} {{ code_preview("textarea-disabled", code_disabled, class="w-full max-w-xs") }}

Invalid

{% set code_invalid %}

Message

Message is required.

{% endset %} {{ code_preview("textarea-invalid", code_invalid, class="w-full max-w-xs") }}

Button

{% set code_button %}

Submit

{% endset %} {{ code_preview("textarea-button", code_button, class="w-full max-w-xs") }}

Form

{% set code_form %}

Bio

You can @mention other users and organizations.

Submit {% endset %} {{ code_preview("textarea-form", code_form, class="w-full max-w-sm") }}

RTL

Textareas support right-to-left layouts through native browser direction handling. Add dir="rtl" to the textarea, field, or an ancestor.

{% set code_rtl %}

التعليقات

شاركنا أفكارك حول الخدمة.

{% endset %} {{ code_preview("textarea-rtl", code_rtl, class="w-full max-w-xs") }}