View as Markdown

Field

Combine labels, controls, and help text to compose accessible form fields and grouped inputs.

Loading... 
<div class="w-full max-w-md">
    <form>
        <twig:Field:Group>
            <twig:Field:Set>
                <twig:Field:Legend>Payment Method</twig:Field:Legend>
                <twig:Field:Description>
                    All transactions are secure and encrypted
                </twig:Field:Description>
                <twig:Field:Group>
                    <twig:Field>
                        <twig:Field:Label for="checkout-7j9-card-name-43j">
                            Name on Card
                        </twig:Field:Label>
                        <twig:Input
                            id="checkout-7j9-card-name-43j"
                            placeholder="Evil Rabbit"
                            required
                        />
                    </twig:Field>
                    <twig:Field>
                        <twig:Field:Label for="checkout-7j9-card-number-uw1">
                            Card Number
                        </twig:Field:Label>
                        <twig:Input
                            id="checkout-7j9-card-number-uw1"
                            placeholder="1234 5678 9012 3456"
                            required
                        />
                        <twig:Field:Description>
                            Enter your 16-digit card number
                        </twig:Field:Description>
                    </twig:Field>
                    <div class="grid grid-cols-3 gap-4">
                        <twig:Field>
                            <twig:Field:Label for="checkout-exp-month-ts6">
                                Month
                            </twig:Field:Label>
                            <twig:Select id="checkout-exp-month-ts6">
                                <option value="" disabled selected>MM</option>
                                <option value="01">01</option>
                                <option value="02">02</option>
                                <option value="03">03</option>
                                <option value="04">04</option>
                                <option value="05">05</option>
                                <option value="06">06</option>
                                <option value="07">07</option>
                                <option value="08">08</option>
                                <option value="09">09</option>
                                <option value="10">10</option>
                                <option value="11">11</option>
                                <option value="12">12</option>
                            </twig:Select>
                        </twig:Field>
                        <twig:Field>
                            <twig:Field:Label for="checkout-7j9-exp-year-f59">
                                Year
                            </twig:Field:Label>
                            <twig:Select>
                                <option value="" disabled selected>YYY</option>
                                <option value="2024">2024</option>
                                <option value="2025">2025</option>
                                <option value="2026">2026</option>
                                <option value="2027">2027</option>
                                <option value="2028">2028</option>
                                <option value="2029">2029</option>
                            </twig:Select>
                        </twig:Field>
                        <twig:Field>
                            <twig:Field:Label for="checkout-7j9-cvv">CVV</twig:Field:Label>
                            <twig:Input id="checkout-7j9-cvv" placeholder="123" required />
                        </twig:Field>
                    </div>
                </twig:Field:Group>
            </twig:Field:Set>
            <twig:Field:Separator />
            <twig:Field:Set>
                <twig:Field:Legend>Billing Address</twig:Field:Legend>
                <twig:Field:Description>
                    The billing address associated with your payment method
                </twig:Field:Description>
                <twig:Field:Group>
                    <twig:Field orientation="horizontal">
                        <twig:Checkbox
                            id="checkout-7j9-same-as-shipping-wgm"
                            checked
                        />
                        <twig:Field:Label
                            for="checkout-7j9-same-as-shipping-wgm"
                            class="font-normal"
                        >
                            Same as shipping address
                        </twig:Field:Label>
                    </twig:Field>
                </twig:Field:Group>
            </twig:Field:Set>
            <twig:Field:Set>
                <twig:Field:Group>
                    <twig:Field>
                        <twig:Field:Label for="checkout-7j9-optional-comments">
                            Comments
                        </twig:Field:Label>
                        <twig:Textarea
                            id="checkout-7j9-optional-comments"
                            placeholder="Add any additional comments"
                            class="resize-none"
                        />
                    </twig:Field>
                </twig:Field:Group>
            </twig:Field:Set>
            <twig:Field orientation="horizontal">
                <twig:Button type="submit">Submit</twig:Button>
                <twig:Button variant="outline" type="button">
                    Cancel
                </twig:Button>
            </twig:Field>
        </twig:Field:Group>
    </form>
</div>

Installation

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

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 orientation &#039;vertical&#039;|&#039;horizontal&#039;|&#039;responsive&#039; The layout direction of the field. #}
{# @block content The field content, typically includes `Field:Label` and form input(s). #}
{%- props orientation = &#039;vertical&#039; -%}
{%- set style = html_cva(
    base: &#039;group/field flex w-full gap-2 data-[invalid=true]:text-destructive&#039;,
    variants: {
        orientation: {
            vertical: &#039;flex-col *:w-full [&amp;&gt;.sr-only]:w-auto&#039;,
            horizontal: &#039;flex-row items-center has-[&gt;[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[&gt;[data-slot=field-content]]:[&amp;&gt;[role=checkbox],[role=radio]]:mt-px&#039;,
            responsive: &#039;flex-col *:w-full [&amp;&gt;.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:has-[&gt;[data-slot=field-content]]:items-start @md/field-group:*:w-auto @md/field-group:*:data-[slot=field-label]:flex-auto @md/field-group:has-[&gt;[data-slot=field-content]]:[&amp;&gt;[role=checkbox],[role=radio]]:mt-px&#039;,
        },
    },
) -%}

&lt;div
    role=&quot;group&quot;
    data-slot=&quot;field&quot;
    data-orientation=&quot;{{ orientation }}&quot;
    class=&quot;{{ style.apply({orientation: orientation}, attributes.render(&#039;class&#039;))|tailwind_merge }}&quot;
    {{ attributes }}
&gt;
    {%- block content %}{% endblock -%}
&lt;/div&gt;

{# @block content The input and supplementary elements like `Field:Description` and `Field:Error`. #}
&lt;div
    data-slot=&quot;field-content&quot;
    class=&quot;{{ (&#039;group/field-content flex flex-1 flex-col gap-0.5 leading-snug &#039; ~ attributes.render(&#039;class&#039;))|tailwind_merge }}&quot;
    {{ attributes }}
&gt;
    {%- block content %}{% endblock -%}
&lt;/div&gt;

{# @block content The helper text describing the field. #}
&lt;p
    data-slot=&quot;field-description&quot;
    class=&quot;{{ (&#039;ltr:text-left rtl:text-start text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&amp;]:-mt-1.5 last:mt-0 nth-last-2:-mt-1 [&amp;&gt;a]:underline [&amp;&gt;a]:underline-offset-4 [&amp;&gt;a:hover]:text-primary &#039; ~ attributes.render(&#039;class&#039;))|tailwind_merge }}&quot;
    {{ attributes }}
&gt;
    {%- block content %}{% endblock -%}
&lt;/p&gt;

{# @prop errors array A list of error messages (strings or objects with a `message` property). #}
{# @block content Custom error content, overrides the `errors` prop if provided. #}
{%- props errors = [] -%}
{%- set slot_content -%}{%- block content %}{% endblock -%}{%- endset -%}
{%- set slot_content = slot_content|trim -%}

{%- if slot_content == &#039;&#039; -%}
    {%- set messages = [] -%}
    {%- for error in errors|default([]) -%}
        {%- set message = error.message ?? error -%}
        {%- if message is not same as(false) and message is not null and message != &#039;&#039; and not (message in messages) -%}
            {%- set messages = messages|merge([message]) -%}
        {%- endif -%}
    {%- endfor -%}
{%- endif -%}

{%- if slot_content != &#039;&#039; or (messages ?? [])|length &gt; 0 -%}
    &lt;div
        role=&quot;alert&quot;
        data-slot=&quot;field-error&quot;
        class=&quot;{{ (&#039;text-destructive text-sm font-normal &#039; ~ attributes.render(&#039;class&#039;))|tailwind_merge }}&quot;
        {{ attributes }}
    &gt;
        {%- if slot_content != &#039;&#039; -%}
            {{ slot_content }}
        {%- elseif (messages ?? [])|length == 1 -%}
            {{ messages[0] }}
        {%- else -%}
            &lt;ul class=&quot;ltr:ml-4 rtl:ms-4 flex list-disc flex-col gap-1&quot;&gt;
                {%- for message in messages|default([]) -%}
                    &lt;li&gt;{{ message }}&lt;/li&gt;
                {%- endfor -%}
            &lt;/ul&gt;
        {%- endif -%}
    &lt;/div&gt;
{%- endif -%}

{# @block content The grouped fields, typically multiple `Field` components. #}
&lt;div
    data-slot=&quot;field-group&quot;
    class=&quot;{{ (&#039;group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4 &#039; ~ attributes.render(&#039;class&#039;))|tailwind_merge }}&quot;
    {{ attributes }}
&gt;
    {%- block content %}{% endblock -%}
&lt;/div&gt;

{# @block content The label text for the field. #}
&lt;twig:Label
    data-slot=&quot;field-label&quot;
    class=&quot;{{ (&#039;group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-checked:border-primary/30 has-checked:bg-primary/5 has-[&gt;[data-slot=field]]:rounded-lg has-[&gt;[data-slot=field]]:border *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 dark:has-checked:border-primary/20 dark:has-checked:bg-primary/10 has-[&gt;[data-slot=field]]:w-full has-[&gt;[data-slot=field]]:flex-col &#039; ~ attributes.render(&#039;class&#039;))|tailwind_merge }}&quot;
    {{ ...attributes }}
&gt;
    {{- block(outerBlocks.content) -}}
&lt;/twig:Label&gt;

{# @prop variant &#039;legend&#039;|&#039;label&#039; The text size variant. #}
{# @block content The legend text for a fieldset. #}
{%- props variant = &#039;legend&#039; -%}
&lt;legend
    data-slot=&quot;field-legend&quot;
    data-variant=&quot;{{ variant }}&quot;
    class=&quot;{{ (&#039;mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base &#039; ~ attributes.render(&#039;class&#039;))|tailwind_merge }}&quot;
    {{ attributes }}
&gt;
    {%- block content %}{% endblock -%}
&lt;/legend&gt;

{# @block content Optional text displayed in the center of the separator. #}
{%- set content -%}{%- block content %}{% endblock -%}{%- endset -%}
{%- set has_content = content|trim != &#039;&#039; -%}
&lt;div
    data-slot=&quot;field-separator&quot;
    data-content=&quot;{{ has_content ? &#039;true&#039; : &#039;false&#039; }}&quot;
    class=&quot;{{ (&#039;relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 &#039; ~ attributes.render(&#039;class&#039;))|tailwind_merge }}&quot;
    {{ attributes }}
&gt;
    &lt;twig:Separator class=&quot;absolute inset-0 top-1/2&quot; /&gt;
    {%- if has_content -%}
        &lt;span
            class=&quot;relative mx-auto block w-fit bg-background px-2 text-muted-foreground&quot;
            data-slot=&quot;field-separator-content&quot;
        &gt;
            {{ content }}
        &lt;/span&gt;
    {%- endif -%}
&lt;/div&gt;

{# @block content The fieldset content, typically includes `Field:Legend` and `Field` components. #}
&lt;fieldset
    data-slot=&quot;field-set&quot;
    class=&quot;{{ (&#039;flex flex-col gap-4 has-[&gt;[data-slot=checkbox-group]]:gap-3 has-[&gt;[data-slot=radio-group]]:gap-3 &#039; ~ attributes.render(&#039;class&#039;))|tailwind_merge }}&quot;
    {{ attributes }}
&gt;
    {%- block content %}{% endblock -%}
&lt;/fieldset&gt;

{# @block content The title text for the field (non-label variant). #}
&lt;div
    data-slot=&quot;field-label&quot;
    class=&quot;{{ (&#039;flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50 &#039; ~ attributes.render(&#039;class&#039;))|tailwind_merge }}&quot;
    {{ attributes }}
&gt;
    {%- block content %}{% endblock -%}
&lt;/div&gt;

{# @prop orientation &#039;horizontal&#039;|&#039;vertical&#039; The separator orientation. #}
{# @prop decorative boolean Whether the separator is purely decorative (not semantic). #}
{%- props orientation = &#039;horizontal&#039;, decorative = true -%}
&lt;div
    class=&quot;{{ (&#039;shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch &#039; ~ attributes.render(&#039;class&#039;))|tailwind_merge }}&quot;
    {{ attributes.defaults({
        &#039;data-slot&#039;: &#039;separator&#039;,
        &#039;data-orientation&#039;: orientation,
        role: decorative ? &#039;none&#039; : &#039;separator&#039;,
        &#039;aria-orientation&#039;: decorative ? false : orientation,
    }) }}
&gt;&lt;/div&gt;

{# @block content The label text for a form control. #}
&lt;label
    data-slot=&quot;label&quot;
    class=&quot;{{ (&#039;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 &#039; ~ attributes.render(&#039;class&#039;))|tailwind_merge }}&quot;
    {{ attributes.without(&#039;class&#039;) }}
&gt;
    {%- block content %}{% endblock -%}
&lt;/label&gt;

Usage

<twig:Field:Set>
    <twig:Field:Legend>Profile</twig:Field:Legend>
    <twig:Field:Description>This appears on invoices and emails.</twig:Field:Description>
    <twig:Field:Group>
        <twig:Field>
            <twig:Field:Label for="name">Full name</twig:Field:Label>
            <twig:Input id="name" autocomplete="off" placeholder="Evil Rabbit" />
            <twig:Field:Description>This appears on invoices and emails.</twig:Field:Description>
        </twig:Field>
        <twig:Field>
            <twig:Field:Label for="username">Username</twig:Field:Label>
            <twig:Input id="username" autocomplete="off" aria-invalid />
            <twig:Field:Error>Choose another username.</twig:Field:Error>
        </twig:Field>
        <twig:Field orientation="horizontal">
            <twig:Switch id="newsletter" />
            <twig:Field:Label for="newsletter">Subscribe to the newsletter</twig:Field:Label>
        </twig:Field>
    </twig:Field:Group>
</twig:Field:Set>

Examples

Input

Loading... 
<div class="w-full max-w-md">
    <twig:Field:Set>
        <twig:Field:Group>
            <twig:Field>
                <twig:Field:Label for="username">Username</twig:Field:Label>
                <twig:Input id="username" type="text" placeholder="Max Leiter" />
                <twig:Field:Description>
                    Choose a unique username for your account.
                </twig:Field:Description>
            </twig:Field>
            <twig:Field>
                <twig:Field:Label for="password">Password</twig:Field:Label>
                <twig:Field:Description>
                    Must be at least 8 characters long.
                </twig:Field:Description>
                <twig:Input id="password" type="password" placeholder="••••••••" />
            </twig:Field>
        </twig:Field:Group>
    </twig:Field:Set>
</div>

Textarea

Loading... 
<div class="w-full max-w-md">
    <twig:Field:Set>
        <twig:Field:Group>
            <twig:Field>
                <twig:Field:Label for="feedback">Feedback</twig:Field:Label>
                <twig:Textarea
                    id="feedback"
                    placeholder="Your feedback helps us improve..."
                    rows="4"
                />
                <twig:Field:Description>
                    Share your thoughts about our service.
                </twig:Field:Description>
            </twig:Field>
        </twig:Field:Group>
    </twig:Field:Set>
</div>

Select

Loading... 
<div class="w-full max-w-md">
    <twig:Field>
        <twig:Field:Label for="department">Department</twig:Field:Label>
        <twig:Select id="department">
            <option value="engineering">Engineering</option>
            <option value="design">Design</option>
            <option value="marketing">Marketing</option>
            <option value="sales">Sales</option>
            <option value="support">Customer Support</option>
            <option value="hr">Human Resources</option>
            <option value="finance">Finance</option>
            <option value="operations">Operations</option>
        </twig:Select>
        <twig:Field:Description>
            Select your department or area of work.
        </twig:Field:Description>
    </twig:Field>
</div>

Fieldset

Loading... 
<div class="w-full max-w-md space-y-6">
    <twig:Field:Set>
        <twig:Field:Legend>Address information</twig:Field:Legend>
        <twig:Field:Description>
            We need your address to deliver your order.
        </twig:Field:Description>
        <twig:Field:Group>
            <twig:Field>
                <twig:Field:Label for="street">Street address</twig:Field:Label>
                <twig:Input id="street" type="text" placeholder="123 Main St" />
            </twig:Field>
            <div class="grid grid-cols-2 gap-4">
                <twig:Field>
                    <twig:Field:Label for="city">City</twig:Field:Label>
                    <twig:Input id="city" type="text" placeholder="New York" />
                </twig:Field>
                <twig:Field>
                    <twig:Field:Label for="zip">Postal code</twig:Field:Label>
                    <twig:Input id="zip" type="text" placeholder="90502" />
                </twig:Field>
            </div>
        </twig:Field:Group>
    </twig:Field:Set>
</div>

Checkbox

Loading... 
<div class="w-full max-w-md">
    <twig:Field:Group>
        <twig:Field:Set>
            <twig:Field:Legend variant="label">
                Show these items on the desktop
            </twig:Field:Legend>
            <twig:Field:Description>
                Select the items you want to show on the desktop.
            </twig:Field:Description>
            <twig:Field:Group class="gap-3">
                <twig:Field orientation="horizontal">
                    <twig:Checkbox id="finder-pref-9k2-hard-disks-ljj" />
                    <twig:Field:Label
                        for="finder-pref-9k2-hard-disks-ljj"
                        class="font-normal"
                        checked
                    >
                        Hard disks
                    </twig:Field:Label>
                </twig:Field>
                <twig:Field orientation="horizontal">
                    <twig:Checkbox id="finder-pref-9k2-external-disks-1yg" />
                    <twig:Field:Label
                        for="finder-pref-9k2-external-disks-1yg"
                        class="font-normal"
                    >
                        External disks
                    </twig:Field:Label>
                </twig:Field>
                <twig:Field orientation="horizontal">
                    <twig:Checkbox id="finder-pref-9k2-cds-dvds-fzt" />
                    <twig:Field:Label
                        for="finder-pref-9k2-cds-dvds-fzt"
                        class="font-normal"
                    >
                        CDs, DVDs, and iPods
                    </twig:Field:Label>
                </twig:Field>
                <twig:Field orientation="horizontal">
                    <twig:Checkbox id="finder-pref-9k2-connected-servers-6l2" />
                    <twig:Field:Label
                        for="finder-pref-9k2-connected-servers-6l2"
                        class="font-normal"
                    >
                        Connected servers
                    </twig:Field:Label>
                </twig:Field>
            </twig:Field:Group>
        </twig:Field:Set>
        <twig:Field:Separator />
        <twig:Field orientation="horizontal">
            <twig:Checkbox id="finder-pref-9k2-sync-folders-nep" checked />
            <twig:Field:Content>
                <twig:Field:Label for="finder-pref-9k2-sync-folders-nep">
                    Sync Desktop & Documents folders
                </twig:Field:Label>
                <twig:Field:Description>
                    Your Desktop & Documents folders are being synced with iCloud Drive. You can access them from other devices.
                </twig:Field:Description>
            </twig:Field:Content>
        </twig:Field>
    </twig:Field:Group>
</div>

Switch

Loading... 
<twig:Field orientation="horizontal" class="w-fit">
    <twig:Field:Label for="2fa">Multi-factor authentication</twig:Field:Label>
    <twig:Switch id="2fa" />
</twig:Field>

Choice Card

Wrap Field components inside Field:Label to create selectable field groups. This works with RadioGroup:Item, Checkbox, and Switch components.

Loading... 
<twig:Field:Group class="w-full max-w-xs">
    <twig:Field:Set>
        <twig:Field:Legend variant="label">Compute Environment</twig:Field:Legend>
        <twig:Field:Description>Select the compute environment for your cluster.</twig:Field:Description>
        <twig:RadioGroup>
            <twig:Field:Label for="kubernetes-r2h">
                <twig:Field orientation="horizontal">
                    <twig:Field:Content>
                        <twig:Field:Title>Kubernetes</twig:Field:Title>
                        <twig:Field:Description>Run GPU workloads on a K8s cluster.</twig:Field:Description>
                    </twig:Field:Content>
                    <twig:RadioGroup:Item name="compute" value="kubernetes" id="kubernetes-r2h" checked />
                </twig:Field>
            </twig:Field:Label>
            <twig:Field:Label for="vm-z4k">
                <twig:Field orientation="horizontal">
                    <twig:Field:Content>
                        <twig:Field:Title>Virtual Machine</twig:Field:Title>
                        <twig:Field:Description>Access a cluster to run GPU workloads.</twig:Field:Description>
                    </twig:Field:Content>
                    <twig:RadioGroup:Item name="compute" value="vm" id="vm-z4k" />
                </twig:Field>
            </twig:Field:Label>
        </twig:RadioGroup>
    </twig:Field:Set>
</twig:Field:Group>

Field Group

Loading... 
<div class="w-full max-w-md">
    <twig:Field:Group>
        <twig:Field:Set>
            <twig:Field:Label>Responses</twig:Field:Label>
            <twig:Field:Description>
                Get notified when ChatGPT responds to requests that take time, like research or image generation.
            </twig:Field:Description>
            <twig:Field:Group data-slot="checkbox-group">
                <twig:Field orientation="horizontal">
                    <twig:Checkbox id="push" checked disabled />
                    <twig:Field:Label for="push" class="font-normal">
                        Push notifications
                    </twig:Field:Label>
                </twig:Field>
            </twig:Field:Group>
        </twig:Field:Set>
        <twig:Field:Separator />
        <twig:Field:Set>
            <twig:Field:Label>Tasks</twig:Field:Label>
            <twig:Field:Description>
                Get notified when tasks you've created have updates. <a href="#">Manage tasks</a>
            </twig:Field:Description>
            <twig:Field:Group data-slot="checkbox-group">
                <twig:Field orientation="horizontal">
                    <twig:Checkbox id="push-tasks" />
                    <twig:Field:Label for="push-tasks" class="font-normal">
                        Push notifications
                    </twig:Field:Label>
                </twig:Field>
                <twig:Field orientation="horizontal">
                    <twig:Checkbox id="email-tasks" />
                    <twig:Field:Label for="email-tasks" class="font-normal">
                        Email notifications
                    </twig:Field:Label>
                </twig:Field>
            </twig:Field:Group>
        </twig:Field:Set>
    </twig:Field:Group>
</div>

RTL

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

Loading... 
<div class="flex flex-col gap-8 w-full items-center">
    <div dir="rtl" class="w-full max-w-md">
        <form>
            <twig:Field:Group>
                <twig:Field:Set>
                    <twig:Field:Legend>طريقة الدفع</twig:Field:Legend>
                    <twig:Field:Description>جميع المعاملات آمنة ومشفرة</twig:Field:Description>
                    <twig:Field:Group>
                        <twig:Field>
                            <twig:Field:Label for="rtl-ar-name">الاسم على البطاقة</twig:Field:Label>
                            <twig:Input id="rtl-ar-name" placeholder="Evil Rabbit" required />
                        </twig:Field>
                        <twig:Field>
                            <twig:Field:Label for="rtl-ar-comments">تعليقات</twig:Field:Label>
                            <twig:Textarea id="rtl-ar-comments" placeholder="أضف أي تعليقات إضافية" class="resize-none" />
                        </twig:Field>
                    </twig:Field:Group>
                </twig:Field:Set>
                <twig:Field orientation="horizontal">
                    <twig:Button type="submit">إرسال</twig:Button>
                    <twig:Button variant="outline" type="button">إلغاء</twig:Button>
                </twig:Field>
            </twig:Field:Group>
        </form>
    </div>

    <div dir="rtl" class="w-full max-w-md">
        <form>
            <twig:Field:Group>
                <twig:Field:Set>
                    <twig:Field:Legend>שיטת תשלום</twig:Field:Legend>
                    <twig:Field:Description>כל העסקאות מאובטחות ומוגנות</twig:Field:Description>
                    <twig:Field:Group>
                        <twig:Field>
                            <twig:Field:Label for="rtl-he-name">שם מלא</twig:Field:Label>
                            <twig:Input id="rtl-he-name" placeholder="Evil Rabbit" required />
                        </twig:Field>
                        <twig:Field>
                            <twig:Field:Label for="rtl-he-comments">הערות</twig:Field:Label>
                            <twig:Textarea id="rtl-he-comments" placeholder="כתוב הערות" class="resize-none" />
                        </twig:Field>
                    </twig:Field:Group>
                </twig:Field:Set>
                <twig:Field orientation="horizontal">
                    <twig:Button type="submit">שלח</twig:Button>
                    <twig:Button variant="outline" type="button">בטל</twig:Button>
                </twig:Field>
            </twig:Field:Group>
        </form>
    </div>
</div>

API Reference

<twig:Field>

Prop Type Default
orientation 
 'vertical'|'horizontal'|'responsive' 'vertical'
Block Description
content The field content, typically includes Field:Label and form input(s).

<twig:Field:Content>

Block Description
content The input and supplementary elements like Field:Description and Field:Error.

<twig:Field:Description>

Block Description
content The helper text describing the field.

<twig:Field:Error>

Prop Type Default
errors 
 array []
Block Description
content Custom error content, overrides the errors prop if provided.

<twig:Field:Group>

Block Description
content The grouped fields, typically multiple Field components.

<twig:Field:Label>

Block Description
content The label text for the field.

<twig:Field:Legend>

Prop Type Default
variant 
 'legend'|'label' 'legend'
Block Description
content The legend text for a fieldset.

<twig:Field:Separator>

Block Description
content Optional text displayed in the center of the separator.

<twig:Field:Set>

Block Description
content The fieldset content, typically includes Field:Legend and Field components.

<twig:Field:Title>

Block Description
content The title text for the field (non-label variant).