form-patterns

What problem does it solve?

This Skill provides a clear and consistent set of patterns for building forms using DaisyUI v5, addressing the significant changes from v4. It ensures forms are well-structured, accessible, visually appealing, and integrate seamlessly with SvelteKit's remote function error handling, saving development time and improving user experience.

Core Features & Use Cases

• DaisyUI v5 Structure: Guides on using the new fieldset/fieldset-legend and <label class="input"> patterns for inputs, ensuring correct styling and accessibility.
• Automatic Validation UI: Leverages the validator class to provide instant visual feedback for input validation states, improving user guidance.
• Consistent Spacing & Layout: Recommends space-y-4 for forms and w-full for inputs to maintain a uniform and responsive design across your application.
• Integrated Error Handling: Shows how to display server-side errors from SvelteKit remote functions directly within the form, providing immediate and relevant feedback to users.
• Use Case: Create a user registration form that includes fields for name, email, and password. This Skill provides the exact DaisyUI v5 classes and structure to build this form, ensuring it looks professional, provides clear validation feedback, and handles errors gracefully.

Quick Start

Wrap form fields in <fieldset class="fieldset"> with a <legend class="fieldset-legend">. For inputs, use <label class="input w-full"> as a wrapper, containing <input class="grow">. Add the validator class to the <label> for automatic validation styling. For selects and textareas, apply select w-full or textarea w-full directly to the element. Display server errors using {#if my_form.error}.