Checkbox

A form control that allows the user to toggle between checked and unchecked states.

<div class="flex items-center space-x-2">
    <twig:Checkbox id="terms" />
    <label for="terms" class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
        Accept terms and conditions
    </label>
</div>

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

<input
    type="checkbox"
    class="{{ 'peer size-4 inline-block align-middle accent-primary ' ~ 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

<div class="flex items-center space-x-2">
    <twig:Checkbox id="terms" />
    <label for="terms" class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
        Accept terms and conditions
    </label>
</div>

Examples

Default

<div class="flex items-center space-x-2">
    <twig:Checkbox id="terms" />
    <label for="terms" class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
        Accept terms and conditions
    </label>
</div>

With Label Component

<div class="flex items-center space-x-2">
    <twig:Checkbox id="terms" />
    <twig:Label for="terms">Accept terms and conditions</twig:Label>
</div>

Disabled

<div class="flex items-center space-x-2">
    <twig:Checkbox id="terms" disabled />
    <twig:Label for="terms">Accept terms and conditions</twig:Label>
</div>