Label

A text element that identifies form controls and other content.

Loading... 
<div class="flex items-center space-x-2">
    <twig:Checkbox id="terms" />
    <twig:Label for="terms">Accept terms and conditions</twig: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 label --kit shadcn

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

  1. Copy the following file(s) into your Symfony app:
    templates/components/Label.html.twig 
    {# @block content The default block #}
<label
    class="{{ ('flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 ' ~ attributes.render('class'))|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</label>
  2. If necessary, install the following Composer dependencies: 
    $ composer require tales-from-a-dev/twig-tailwind-extra:^1.0.0
  3. And the most important, enjoy!

Usage

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

Examples

Default

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

With Input

Loading... 
<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" placeholder="Enter your email" />
</div>

Required Field

Loading... 
<div class="grid w-full max-w-sm items-center gap-1.5">
    <twig:Label for="email" class="gap-0 after:content-['*'] after:ml-0.5 after:text-red-500">Email</twig:Label>
    <twig:Input type="email" id="email" placeholder="Enter your email" />
</div>

API Reference

Label

Block Description
content The default block