View as Markdown

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

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

Installation

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

Install the following Composer dependencies:

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

Copy the following file(s) into your app:

{# @block content The toggle label text. #}
&lt;label class=&quot;inline-flex items-center cursor-pointer&quot;&gt;
    &lt;input type=&quot;checkbox&quot; class=&quot;{{ (&#039;sr-only peer &#039; ~ attributes.render(&#039;class&#039;))|tailwind_merge }}&quot; {{ attributes }}&gt;
    &lt;div class=&quot;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-[&#039;&#039;] 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&quot;&gt;&lt;/div&gt;
    &lt;span class=&quot;select-none ms-3 text-sm font-medium text-heading peer-disabled:text-fg-disabled&quot;&gt;
        {%- block content -%}{%- endblock -%}
    &lt;/span&gt;
&lt;/label&gt;

Usage

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

Examples

Disabled

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

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

API Reference

<twig:Toggle>

Block Description
content The toggle label text.