Textarea

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

<div class="*:max-w-xs contents">
    <twig:Textarea placeholder="Type your message here." />
</div>

Installation

php bin/console ux:install textarea --kit shadcn

Install the following Composer dependencies:

composer require tales-from-a-dev/twig-tailwind-extra:^1.0.0

Copy the following file(s) into your app:

{# @block content The initial textarea value. #}
&lt;textarea
    data-slot=&quot;textarea&quot;
    class=&quot;{{ (&#039;flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 &#039; ~ attributes.render(&#039;class&#039;))|tailwind_merge }}&quot;
    {{ attributes }}
&gt;
    {%- block content %}{% endblock -%}
&lt;/textarea&gt;

Usage

<twig:Textarea />

Examples

Field

Use Field, Field:Label, and Field:Description to create a textarea with a label and description.

<div class="*:max-w-xs contents">
    <twig:Field>
        <twig:Field:Label for="textarea-message">Message</twig:Field:Label>
        <twig:Field:Description>Enter your message below.</twig:Field:Description>
        <twig:Textarea id="textarea-message" placeholder="Type your message here." />
    </twig:Field>
</div>

Disabled

Use the disabled attribute to disable the textarea. To style the disabled state, add the data-disabled attribute to the Field component.

<div class="*:max-w-xs contents">
    <twig:Field data-disabled>
        <twig:Field:Label for="textarea-disabled">Message</twig:Field:Label>
        <twig:Textarea id="textarea-disabled" placeholder="Type your message here." disabled />
    </twig:Field>
</div>

Invalid

Use the aria-invalid attribute to mark the textarea as invalid. To style the invalid state, add the data-invalid attribute to the Field component.

<div class="*:max-w-xs contents">
    <twig:Field data-invalid>
        <twig:Field:Label for="textarea-invalid">Message</twig:Field:Label>
        <twig:Textarea id="textarea-invalid" placeholder="Type your message here." aria-invalid="true" />
        <twig:Field:Description>Please enter a valid message.</twig:Field:Description>
    </twig:Field>
</div>

Button

Pair with Button to create a textarea with a submit button.

<div class="*:max-w-xs contents">
    <div class="grid w-full gap-2">
        <twig:Textarea placeholder="Type your message here." />
        <twig:Button>Send message</twig:Button>
    </div>
</div>

RTL

To enable RTL support, set the dir="rtl" attribute on the root element.

<div class="*:max-w-xs contents">
    <div class="flex flex-col gap-8 w-full">
        {# Arabic #}
        <twig:Field dir="rtl">
            <twig:Field:Label for="feedback-ar" dir="rtl">التعليقات</twig:Field:Label>
            <twig:Textarea id="feedback-ar" placeholder="تعليقاتك تساعدنا على التحسين..." dir="rtl" rows="4" />
            <twig:Field:Description dir="rtl">شاركنا أفكارك حول خدمتنا.</twig:Field:Description>
        </twig:Field>

        {# Hebrew #}
        <twig:Field dir="rtl">
            <twig:Field:Label for="feedback-he" dir="rtl">משוב</twig:Field:Label>
            <twig:Textarea id="feedback-he" placeholder="המשוב שלך עוזר לנו להתקדם..." dir="rtl" rows="4" />
            <twig:Field:Description dir="rtl">שתף את מחשבותיך על השירות שלנו.</twig:Field:Description>
        </twig:Field>
    </div>

</div>

API Reference

`<twig:Textarea>`

Block	Description
`content`	The initial textarea value.