Form Patterns

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

Form Patterns

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

Structure

• SKILL.md - Main skill instructions
• references/ - Detailed documentation loaded as needed
• scripts/ - Executable code for deterministic operations
• assets/ - Templates, images, or other resources

Usage

This skill is automatically discovered by Claude when relevant to the task.

Forms with daisyUI v5

Critical patterns for daisyUI v5 form structure - v5 changed significantly from v4.

Mobile Navigation with Dock

IMPORTANT: In v5, btm-nav was replaced with dock.

• Use <div class="dock"> as the container
• Use <button> elements (not <a> tags) for navigation items
• Use dock-active class for active state (not active)
• Use dock-label for text labels
• Sizes: dock-xs, dock-sm, dock-md (default), dock-lg,

dock-xl

<div class="dock z-40 lg:hidden">
	<button class={is_active ? 'dock-active' : ''} onclick={navigate}>
		<Icon size="24px" />
		<span class="dock-label">Label</span>
	</button>
</div>

Key Changes from v4 to v5

• form-control → fieldset
• label with label-text → fieldset-legend for field labels
• Input wrapper uses <label class="input"> instead of class on

<input>

• Actual <input> element gets class="grow"

Important: Tailwind Forms Plugin Conflict

If using @tailwindcss/forms plugin, it causes a double focus ring on inputs. Add this CSS fix to app.css:

/* Fix double focus ring on daisyUI inputs */
.input:has(input:focus) {
	outline: 2px solid var(--input-color, var(--color-base-content));
	outline-offset: 2px;
}

.input input:focus {
	outline: none;
	box-shadow: none;
}

Basic Form Structure

Standard Input Pattern

<fieldset class="fieldset">
	<legend class="fieldset-legend">Email</legend>
	<label class="input w-full">
		<input
			type="email"
			name="email"
			placeholder="Email"
			class="grow"
			required
		/>
	</label>
</fieldset>

Critical: Always add w-full to <label class="input"> for full-width inputs!

With Validation

Use the validator class for automatic validation UI:

<fieldset class="fieldset">
	<legend class="fieldset-legend">Password</legend>
	<label class="validator input w-full">
		<input
			type="password"
			name="password"
			placeholder="At least 8 characters"
			class="grow"
			required
			minlength="8"
		/>
	</label>
	<p class="label">Must be at least 8 characters</p>
</fieldset>

With Helper Text

Use <p class="label"> for helper text below inputs:

<fieldset class="fieldset">
	<legend class="fieldset-legend">Username</legend>
	<label class="validator input w-full">
		<input
			type="text"
			name="username"
			placeholder="johndoe"
			class="grow"
			required
			pattern="[a-z0-9_]+"
		/>
	</label>
	<p class="label">
		Lowercase letters, numbers, and underscores only
	</p>
</fieldset>

Complete Form Example

<script lang="ts">
	import { my_form_function } from './my.remote';
</script>

<h2 class="mb-6 card-title text-2xl">Form Title</h2>

<form {...my_form_function} 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>

	<fieldset class="fieldset">
		<legend class="fieldset-legend">Email</legend>
		<label class="validator input w-full">
			<input
				type="email"
				name="email"
				placeholder="Email"
				class="grow"
				required
			/>
		</label>
	</fieldset>

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

Form Error Handling

Remote functions automatically provide error states:

<script lang="ts">
	import { my_form } from './my.remote';
</script>

<form {...my_form}>
	<!-- form fields -->

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

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

Class Reference

Label Classes (Container)

<label class="input w-full"><!-- Basic input --></label>
<label class="validator input w-full"><!-- With validation --></label>
<label class="input w-full input-primary"
	><!-- Colored border --></label
>
<label class="input input-lg w-full"><!-- Large size --></label>

Input Element Classes

Always use class="grow" on the actual <input> element:

<input class="grow" type="text" />

Button Classes

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

• btn - Base button class
• btn-primary - Primary color
• btn-block - Full width

Select Pattern

Basic Select (v5)

<fieldset class="fieldset">
	<legend class="fieldset-legend">Choose option</legend>
	<select name="type" class="select w-full" required>
		<option value="" disabled>Select type</option>
		<option value="meeting">Meeting</option>
		<option value="call">Call</option>
	</select>
</fieldset>

Key Points:

• Select has 20rem default width, use w-full for full width
• No wrapper needed - apply select class directly to <select>
• Use select-ghost to remove border
• DON'T wrap in `<label class="select">` - this is wrong!

Select with Validation

<fieldset class="fieldset">
	<legend class="fieldset-legend">Required Selection</legend>
	<select class="validator select w-full" required>
		<option value="" disabled selected>Choose</option>
		<option value="1">Option 1</option>
	</select>
	<p class="validator-hint">Please select an option</p>
</fieldset>

Textarea Pattern

Basic Textarea (v5)

<fieldset class="fieldset">
	<legend class="fieldset-legend">Notes</legend>
	<textarea
		name="notes"
		class="textarea w-full"
		rows="4"
		placeholder="Enter your notes..."
	></textarea>
	<p class="label">Helper text here</p>
</fieldset>

Key Points:

• Textarea has border by default (v5 change)
• Use textarea-ghost to remove border
• Don't use `textarea-bordered` - removed in v5
• Apply w-full for full width

With Validation

<textarea class="validator textarea w-full" required minlength="10"
></textarea>
<p class="validator-hint">Minimum 10 characters required</p>

Best Practices

1. Always use `w-full` on <label class="input"> for full-width inputs 2. Use `validator` class for inputs needing validation 3. Use `fieldset` to group related form fields 4. Use `<p class="label">` for helper text 5. Use `btn-block` for full-width buttons 6. Use `space-y-4` on forms for consistent spacing 7. Always include `class="grow"` on the actual <input> element 8. Don't add outline utilities - daisyUI handles focus states 9. For selects: apply classes directly, no label wrapper 10. For textareas: no `-bordered` suffix in v5

Common Mistakes

❌ Wrong - Missing w-full

<label class="validator input">
	<input type="text" class="grow" />
</label>

✅ Correct - With w-full

<label class="validator input w-full">
	<input type="text" class="grow" />
</label>

❌ Wrong - Select wrapped in label

<label class="select w-full">
	<select name="type">
		<option>Option 1</option>
	</select>
</label>

✅ Correct - Select standalone

<select name="type" class="select w-full">
	<option>Option 1</option>
</select>

❌ Wrong - Using -bordered suffix (v4)

<input class="input-bordered input">
<textarea class="textarea-bordered textarea">
<select class="select-bordered select">

✅ Correct - No -bordered (default in v5)

<input class="input">
<textarea class="textarea">
<select class="select">

❌ Wrong - Old v4 pattern

<div class="form-control">
	<label class="label">
		<span class="label-text">Email</span>
	</label>
	<input type="email" class="input-bordered input" />
</div>

✅ Correct - v5 pattern

<fieldset class="fieldset">
	<legend class="fieldset-legend">Email</legend>
	<label class="validator input w-full">
		<input type="email" class="grow" />
	</label>
</fieldset>

Form Spacing

Use space-y-4 on the form for consistent spacing:

<form class="space-y-4">
	<!-- fields here -->
</form>