form-patterns

name: form-patterns

prettier-ignore

description: DaisyUI v5 form patterns. Use for inputs, selects, textareas, validation, and form structure with fieldset/legend.

Form Patterns

Quick Start

<form {...my_form} class="space-y-4">
    <fieldset class="fieldset">
        <legend class="fieldset-legend">Name</legend>
        <label class="validator input w-full">
            <input
                type="text"
                name="name"
                placeholder="Your name"
                class="grow"
                required
            />
        </label>
    </fieldset>

    {#if my_form.error}
        <div class="alert alert-error">{my_form.error}</div>
    {/if}

    <button class="btn btn-block btn-primary" type="submit"
        >Submit</button
    >
</form>

Core Principles

• v5 structure: Use fieldset/fieldset-legend (NOT old form-control/label-text)
• Input wrapper: <label class="input w-full"> contains <input class="grow">
• Validation: Add validator class to label for automatic validation UI
• Selects/textareas: Apply classes directly (e.g., select w-full) - no wrapper
• Error handling: Remote functions provide .error property automatically
• Spacing: Use space-y-4 on forms for consistent spacing

Reference Files

• forms-guide.md - Complete DaisyUI v5 form patterns and examples