Label

Renders an accessible label associated with controls.

100%

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

Installation

php bin/console ux:install label --kit shadcn

Install the following Composer dependencies:

composer require twig/html-extra:^3.24.0 symfony/ux-twig-component:^3.5 tales-from-a-dev/twig-tailwind-extra:^1.3.0

Copy the following file(s) into your app:

templates/components/Label.html.twig

<label
    data-slot="label"
    {{ attributes.defaults({
        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'|tailwind_classes,
    }) }}
>
    {##- The label text for a form control. -#}
    {%- block content %}{% endblock -%}
</label>

Usage

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

Examples

Label in Field

For form fields, use the Field component which includes built-in label, description, and error handling.

100%

<div class="w-full max-w-md">
    <twig:Field>
        <twig:Field:Label for="email">Your email address</twig:Field:Label>
        <twig:Input id="email" />
    </twig:Field>
</div>

RTL

To enable RTL support, set the dir="rtl" attribute on the root element.

100%

<div class="flex flex-col gap-8">
    {# Arabic #}
    <div class="flex gap-2" dir="rtl">
        <twig:Checkbox id="terms-ar" />
        <twig:Label for="terms-ar">قبول الشروط والأحكام</twig:Label>
    </div>
    {# Hebrew #}
    <div class="flex gap-2" dir="rtl">
        <twig:Checkbox id="terms-he" />
        <twig:Label for="terms-he">קבל תנאים והגבלות</twig:Label>
    </div>
</div>

Accessibility

Label renders a native <label>. Bind it to its control with for pointing at the control's id, or wrap the control, so clicking the label focuses it and the control gets an accessible name.
A label is the accessible name of the control. Do not replace it with a placeholder or with adjacent text that is not bound.
Keep help text out of the label and in a separate element referenced with aria-describedby, so the name stays short.
The disabled styling follows the control through peer-disabled and the Field disabled state, so a label does not need to repeat disabled itself.

API Reference

`<twig:Label>`

Block	Description
`content`	The label text for a form control.