View as Markdown

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

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

Install the following Composer dependencies:

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

Copy the following file(s) into your app:

{# @prop variant &#039;default&#039;|&#039;invalid&#039; The visual style variant. #}
{# @block content The label text for a form control. #}
{%- props variant = &#039;default&#039; -%}
{%- set style = html_cva(
    base: &#039;block text-sm font-medium&#039;,
    variants: {
        variant: {
            default: &#039;text-heading&#039;,
            invalid: &#039;text-fg-danger-strong&#039;,
        },
    },
) -%}
&lt;label
    class=&quot;{{ style.apply({variant: variant}, attributes.render(&#039;class&#039;))|tailwind_merge }}&quot;
    {{ attributes }}
&gt;
    {%- block content %}{% endblock -%}
&lt;/label&gt;

Usage

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

API Reference

<twig:Label>

Prop Type Default
variant 
 'default'|'invalid' 'default'
Block Description
content The label text for a form control.