View as Markdown
Label
A text element that identifies form controls and other content.
100%
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.24.0 symfony/ux-twig-component:^3.5 tales-from-a-dev/twig-tailwind-extra:^1.3.0
Install the following front-end dependencies:
npm install flowbite
# ...or with Symfony AssetMapper
php bin/console importmap:require flowbite
Copy the following file(s) into your app:
templates/components/Label.html.twig
{# @prop variant 'default'|'invalid' The visual style variant. #}
{# @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
{{ attributes.defaults({
class: style.apply({variant: variant})|tailwind_classes,
}) }}
>
{%- block content %}{% endblock -%}
</label>
Usage
<twig:Label for="email">Your email address</twig:Label>
API Reference
<twig:Label>
| Prop | Type | Default |
|---|---|---|
variant The visual style variant.
|
'default'|'invalid' |
'default' |
| Block | Description |
|---|---|
content |
The label text for a form control. |