Textarea

A form control for entering multiple lines of text.

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

Installation

Ensure the Symfony UX Toolkit is installed in your Symfony app:

composer require --dev symfony/ux-toolkit

Then, install the recipe and its dependencies by running:

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="{{ 'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 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 placeholder="Type your message here." class="max-w-sm" />

Examples

Default

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

With default content

<twig:Textarea class="max-w-sm">This is the default content of the textarea.</twig:Textarea>

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>

Disabled

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

API Reference

Textarea

Block	Description
`content`	The default block