Label

A text element that identifies form controls and other content.

Loading... 
<div>
    <twig:Label for="text">Company</twig:Label>
    <twig:Input id="text" type="text" />
</div>

Installation

bin/console ux:install label --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/Label.html.twig 
{# @prop variant 'default'|'invalid' The visual style variant. Defaults to `default` #}
{# @block content The label text for a form control #}
{%- props variant = 'default' -%}
{%- set style = html_cva(
    base: 'block text-sm font-medium',
    variants: {
        variant: {
            default: 'text-heading',
            invalid: 'text-fg-danger-strong',
        },
    },
) -%}
<label
    class="{{ style.apply({variant: variant}, attributes.render('class'))|tailwind_merge }}"
    {{ attributes }}
>
    {%- block content %}{% endblock -%}
</label>

Happy coding!

Usage

<twig:Label for="email">Your email address</twig:Label>

API Reference

Label

Prop Type Description
variant 'default'|'invalid' The visual style variant. Defaults to default
Block Description
content The label text for a form control