Toggle

Use the toggle component to switch between a binary state of true or false using a single click available in multiple sizes, variants, and colors

<twig:Toggle id="checked" value="" checked>
    Toggle me
</twig:Toggle>

Installation

bin/console ux:install toggle --kit flowbite-4

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/Toggle.html.twig

<label class="inline-flex items-center cursor-pointer">
    <input type="checkbox" class="{{ ('sr-only peer ' ~ attributes.render('class'))|tailwind_merge }}" {{ attributes }}>
    <div class="relative w-9 h-5 bg-neutral-quaternary peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-soft dark:peer-focus:ring-brand-soft rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-buffer after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all peer-disabled:bg-neutral-tertiary peer-checked:bg-brand"></div>
    <span class="select-none ms-3 text-sm font-medium text-heading peer-disabled:text-fg-disabled">
        {%- block content -%}{%- endblock -%}
    </span>
</label>

Happy coding!

Usage

<twig:Toggle>
    Label
</twig:Toggle>

Examples

Disabled

Apply the disabled attribute to disallow the users from making any further selections.

<div class="flex flex-col gap-3">
    <twig:Toggle id="checked" value="" disabled>
        Toggle me
    </twig:Toggle>

    <twig:Toggle id="checked" value="" checked disabled>
        Toggle me
    </twig:Toggle>
</div>