OpenSkillIndex← back to search
claude-codedevelopment

Claude-skill-registry form-patterns

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

install
source · Clone the upstream repo
git clone https://github.com/majiayu000/claude-skill-registry
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/form-patterns" ~/.claude/skills/majiayu000-claude-skill-registry-form-patterns && rm -rf "$T"
manifest: skills/data/form-patterns/SKILL.md
tags
#ui-components#form-validation#daisyui#html-forms#input-styling
source content

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