Input

A form control that allows users to enter text, numbers, or select files.

<twig:Input type="email" placeholder="Email" 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 input --kit shadcn

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

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

templates/components/Input.html.twig

<input
    class="{{ 'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium 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 ' ~ attributes.render('class')|tailwind_merge }}"
    {{ attributes }}
>

If necessary, install the following Composer dependencies:

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

And the most important, enjoy!

Usage

<twig:Input type="email" placeholder="Email" class="max-w-sm" />

Examples

Default

<twig:Input type="email" placeholder="Email" class="max-w-sm" />

File

<div class="grid w-full max-w-sm items-center gap-1.5">
    <label for="picture">Picture</label>
    <twig:Input type="file" id="picture" />
</div>

Disabled

<twig:Input type="email" placeholder="Email" disabled class="max-w-sm" />

With Label

<div class="grid w-full max-w-sm items-center gap-1.5">
    <twig:Label for="email">Email</twig:Label>
    <twig:Input type="email" id="email" />
</div>

With Button

<div class="flex w-full max-w-sm items-center space-x-2">
    <twig:Input type="email" id="email" />
    <twig:Button type="submit">Subscribe</twig:Button>
</div>