Textarea

A form control for entering multiple lines of text.

Loading... 
<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, run the following command to install the component and its dependencies:

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

The UX Toolkit is not mandatory to install a component. You can install it manually by following the next steps:

  1. 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>
  2. If necessary, install the following Composer dependencies: 
    $ composer require tales-from-a-dev/twig-tailwind-extra:^1.0.0
  3. And the most important, enjoy!

Usage

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

Examples

Default

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

With default content

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

With Label

Loading... 
<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

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

API Reference

Textarea

Block Description
content The default block