Switch

A toggle control that switches between on and off states.

<div class="flex items-center space-x-2">
    <twig:Switch id="airplane-mode" />
    <twig:Label for="airplane-mode">Airplane Mode</twig:Label>
</div>

Installation

bin/console ux:install switch --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/Switch.html.twig

<label class="{{ 'relative inline-flex items-center cursor-pointer ' ~ attributes.render('class')|tailwind_merge }}">
    <input type="checkbox" class="sr-only peer absolute inset-0 w-full h-full cursor-pointer" {{ attributes }}>
    <div class="pointer-events-none w-11 h-6 bg-input rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary peer-disabled:opacity-50 peer-disabled:cursor-not-allowed"></div>
</label>

Happy coding!

Usage

<twig:Switch />