Textarea

A form control for entering multiple lines of text.

<twig:Textarea placeholder="Type your message here." />

Installation

bin/console ux:install textarea --kit shadcn

That's it!

Install the following Composer dependencies:

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

Copy the following file(s) into your Symfony app:

templates/components/Textarea.html.twig

{# @block content The default block #}
<textarea
    class="{{ 'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm ' ~ attributes.render('class')|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</textarea>

Happy coding!

Usage

<twig:Textarea />

Examples

Default

<twig:Textarea placeholder="Type your message here." class="max-w-sm" />

Disabled

<twig:Textarea placeholder="Type your message here." disabled class="max-w-sm" />

With Label

<div class="grid w-sm gap-1.5">
    <twig:Label for="message">Your message</twig:Label>
    <twig:Textarea id="message" placeholder="Type your message here." />
</div>

With Text

<div class="grid w-sm gap-1.5">
    <twig:Label for="message">Your message</twig:Label>
    <twig:Textarea id="message" placeholder="Type your message here." />
    <p class="text-muted-foreground text-sm">
        Your message will be copied to the support team.
    </p>
</div>

API Reference

Textarea

Block	Description
`content`	The default block