Form

<twig:Form class="mx-auto w-full max-w-md">
    <twig:Form:Item>
        <twig:Form:Label for="form-email">Email</twig:Form:Label>
        <twig:Input id="form-email" name="email" type="email" placeholder="you@example.com" />
        <twig:Form:Description>We'll never share your email with anyone else.</twig:Form:Description>
    </twig:Form:Item>
    <twig:Form:Item>
        <twig:Form:Label for="form-bio">Bio</twig:Form:Label>
        <twig:Textarea id="form-bio" name="bio" placeholder="Tell us a bit about yourself" />
        <twig:Form:Description>You can @mention other users and organizations.</twig:Form:Description>
    </twig:Form:Item>
    <div class="flex justify-end gap-2">
        <twig:Button type="button" variant="outline">Cancel</twig:Button>
        <twig:Button type="submit">Save</twig:Button>
    </div>
</twig:Form>

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

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

{# @block content The form fields, typically a list of `Form:Item`. #}
<form
    data-slot="form"
    {{ attributes.defaults({
        class: 'space-y-6'|tailwind_classes,
    }) }}
>
    {%- block content %}{% endblock -%}
</form>

{# @block content The help text. #}
<p
    data-slot="form-description"
    {{ attributes.defaults({
        class: 'text-sm text-muted-foreground'|tailwind_classes,
    }) }}
>
    {%- block content %}{% endblock -%}
</p>

{# @block content A `Form:Label`, a form control, an optional `Form:Description` and an optional `Form:Message`. #}
<div
    data-slot="form-item"
    {{ attributes.defaults({
        class: 'group/form-item grid gap-2'|tailwind_classes,
    }) }}
>
    {%- block content %}{% endblock -%}
</div>

{# @block content The label text. #}
<label
    data-slot="form-label"
    {{ attributes.defaults({
        class: 'flex items-center gap-2 text-sm font-medium leading-none select-none group-has-[[data-slot=form-message]]/form-item:text-destructive'|tailwind_classes,
    }) }}
>
    {%- block content %}{% endblock -%}
</label>

{# @block content The validation error message. #}
<p
    data-slot="form-message"
    {{ attributes.defaults({
        class: 'text-sm text-destructive'|tailwind_classes,
    }) }}
>
    {%- block content %}{% endblock -%}
</p>

<twig:Form class="mx-auto w-full max-w-md">
    <twig:Form:Item>
        <twig:Form:Label for="form-validation-email">Email</twig:Form:Label>
        <twig:Input id="form-validation-email" name="email" type="email" value="not-an-email" aria-invalid="true" />
        <twig:Form:Message>Please enter a valid email address.</twig:Form:Message>
    </twig:Form:Item>
</twig:Form>