# Form Patterns

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

- Skill: `majiayu000/form-patterns` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add majiayu000/form-patterns`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/form-patterns/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/form-patterns

---


# Form Patterns

## Quick Start

```svelte
<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](references/forms-guide.md) - Complete DaisyUI v5
  form patterns and examples