### Install Formsnap with Superforms and Zod

Source: https://github.com/svecosystem/formsnap/blob/main/docs/src/content/quick-start.md

Installs Formsnap, SvelteKit Superforms, and Zod using npm. This step is crucial for setting up Formsnap, which leverages Superforms for form management and Zod for data validation.

```bash
npm install formsnap sveltekit-superforms zod
```

--------------------------------

### Install Formsnap and Dependencies (bash)

Source: https://github.com/svecosystem/formsnap/blob/main/packages/formsnap/README.md

Installs the Formsnap library along with sveltekit-superforms and a schema library. This is the initial setup step for using Formsnap in your SvelteKit project.

```bash
npm i formsnap sveltekit-superforms <your-schema-library>
```

--------------------------------

### Develop Svelte Project with npm

Source: https://github.com/svecosystem/formsnap/blob/main/docs/README.md

Commands to start the development server after installing dependencies. The `-- --open` flag starts the server and automatically opens the app in a new browser tab.

```bash
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

--------------------------------

### Install Formsnap and Dependencies

Source: https://github.com/svecosystem/formsnap/blob/main/README.md

Installs the Formsnap library, sveltekit-superforms, and a schema library (e.g., Zod) using npm. Ensure all necessary packages are installed before proceeding with setup.

```bash
npm i formsnap sveltekit-superforms <your-schema-library>
```

--------------------------------

### Setup Superforms Form in Svelte Page

Source: https://github.com/svecosystem/formsnap/blob/main/docs/src/content/quick-start.md

Initializes the Superforms form in a Svelte page component using `superForm` and enables client-side validation with `zodClient`. The form is then enhanced for progressive enhancement.

```svelte
<script lang="ts">
	import { superForm } from "sveltekit-superforms";
	import { Field } from "formsnap";
	import { zodClient } from "sveltekit-superforms/adapters";
	import { allergies, schema, themes } from "./schema.js";
	import SuperDebug from "sveltekit-superforms";

	let { data } = $props();

	const form = superForm(data.form, {
		validators: zodClient(schema),
	});
	const { form: formData, enhance } = form;
</script>

<form method="POST" use:enhance>
	<!-- ... -->
</form>
<SuperDebug data={$formData} />

```

--------------------------------

### SvelteKit Settings Form with Formsnap

Source: https://github.com/svecosystem/formsnap/blob/main/docs/src/content/quick-start.md

A complete Svelte component demonstrating how to build a settings form using Formsnap. It includes fields for email, bio, language, theme selection, marketing email preferences, and food allergies. The example utilizes sveltekit-superforms for form state management and validation, and Zod for schema definition.

```svelte
<script lang="ts">
	import { superForm } from "sveltekit-superforms";
	import { Field, Control, Label, Description, FieldErrors, Fieldset, Legend } from "formsnap";
	import { zodClient } from "sveltekit-superforms/adapters";
	import { allergies, schema, themes } from "./schema.js";
	import SuperDebug from "sveltekit-superforms";

	let { data } = $props();

	const form = superForm(data.form, {
		validators: zodClient(schema),
	});
	const { form: formData, enhance } = form;
</script>

<form use:enhance class="mx-auto flex max-w-md flex-col" method="POST">
	<Field {form} name="email">
		<Control>
			{#snippet children({ props })}
				<Label>Email</Label>
				<input {...props} type="email" bind:value={$formData.email} />
			{/snippet}
		</Control>
		<Description>Company email is preferred</Description>
		<FieldErrors />
	</Field>
	<Field {form} name="bio">
		<Control>
			{#snippet children({ props })}
				<Label>Bio</Label>
				<textarea {...props} bind:value={$formData.bio} />
			{/snippet}
		</Control>
		<Description>Tell us a bit about yourself.</Description>
		<FieldErrors />
	</Field>
	<Field {form} name="language">
		<Control>
			{#snippet children({ props })}
				<Label>Language</Label>
				<select {...props} bind:value={$formData.language}>
					<option value="fr">French</option>
					<option value="es">Spanish</option>
					<option value="en">English</option>
				</select>
			{/snippet}
		</Control>
		<Description>Help us address you properly.</Description>
		<FieldErrors />
	</Field>
	<Fieldset {form} name="theme">
		<Legend>Select your theme</Legend>
		{#each themes as theme}
			<Control>
				{#snippet children({ props })}
					<Label>{theme}</Label>
					<input {...props} type="radio" value={theme} bind:group={$formData.theme} />
				{/snippet}
			</Control>
		{/each}
		<Description>We prefer dark mode, but the choice is yours.</Description>
		<FieldErrors />
	</Fieldset>
	<Field {form} name="marketingEmails">
		<Control>
			{#snippet children({ props })}
				<input {...props} type="checkbox" bind:checked={$formData.marketingEmails} />
				<Label>I want to receive marketing emails</Label>
			{/snippet}
		</Control>
		<Description>Stay up to date with our latest news and offers.</Description>
		<FieldErrors />
	</Field>
	<Fieldset {form} name="allergies">
		<Legend>Food allergies</Legend>
		{#each allergies as allergy}
			<Control>
				{#snippet children({ props })}
					<input
						{...props}
						type="checkbox"
						bind:group={$formData.allergies}
						value={allergy}
					/>
					<Label>{allergy}</Label>
				{/snippet}
			</Control>
		{/each}
		<Description>When we provide lunch, we'll accommodate your needs.</Description>
		<FieldErrors />
	</Fieldset>
	<button>Submit</button>
</form>
<SuperDebug data={$formData} />

```

--------------------------------

### Svelte Multiple Select Setup

Source: https://github.com/svecosystem/formsnap/blob/main/docs/src/content/recipes/multiple-select.md

This snippet demonstrates the setup for a multiple select input component in Svelte. It imports necessary components from the Formsnap kit and local components to build an interactive form.

```svelte
<script>
	import { Steps, Step } from "@svecodocs/kit"
	import LoadingCard from "$lib/components/loading-card.svelte"
	import MultipleSelectForm from "$lib/components/examples/multiple-select.svelte"
</script>
```

--------------------------------

### Load Superforms Form in SvelteKit Server

Source: https://github.com/svecosystem/formsnap/blob/main/docs/src/content/quick-start.md

Loads the Superforms form object using a Zod adapter in a SvelteKit server load function. This merges PageData and ActionData for seamless form handling.

```ts
import type { PageServerLoad } from "./$types";
import { schema } from "./schema";
import { superValidate } from "sveltekit-superforms";
import { zod } from "sveltekit-superforms/adapters";

export const load: PageServerLoad = async () => {
	return {
		form: await superValidate(zod(schema)),
	};
};

```

--------------------------------

### Server Load Function Setup

Source: https://github.com/svecosystem/formsnap/blob/main/README.md

Sets up the server-side load function in SvelteKit to initialize a superForm using Zod validation for the defined schema. This prepares the form data for the client-side component.

```ts
// +page.server.ts
import { superValidate } from "sveltekit-superforms";
import { zod } from "sveltekit-superforms/adapters";
import type { PageServerLoad } from "./$types";
import { settingsFormSchema } from "./schemas";

export const load: PageServerLoad = async () => {
	return {
		form: await superValidate(zod(settingsFormSchema)),
	};
};
```

--------------------------------

### Svelte Imports for Checkbox Group Example

Source: https://github.com/svecosystem/formsnap/blob/main/docs/src/content/recipes/checkbox-groups.md

Imports necessary Svelte components and utilities for building the checkbox group example. Includes components from '@svecodocs/kit' and local components for UI elements and the checkbox group itself.

```svelte
<script>
	import { Steps, Step } from '@svecodocs/kit'
	import LoadingCard from '$lib/components/loading-card.svelte'
	import CheckboxGroup from '$lib/components/examples/checkbox-group.svelte'
</script>
```

--------------------------------

### Fieldset: HTML Grouping Example (HTML)

Source: https://github.com/svecosystem/formsnap/blob/main/docs/src/content/components/fieldset.md

This example shows the native HTML `<fieldset>` and `<legend>` elements used for grouping related form controls, independent of the Svelte component. It demonstrates how to structure larger forms into logical sections like 'Billing Address' and 'Shipping Address' for better organization and accessibility.

```html
<form>
	<fieldset>
		<legend>Billing Address</legend>
		<!-- ... billing address fields -->
	</fieldset>
	<fieldset>
		<legend>Shipping Address</legend>
		<!-- ... shipping address fields -->
	</fieldset>
</form>
```

--------------------------------

### Migrate `asChild` prop to `child` snippet (v1 vs v2)

Source: https://github.com/svecosystem/formsnap/blob/main/docs/src/content/v2-migration-guide.md

Demonstrates the change from the `asChild` prop in Formsnap v1 to the `child` snippet pattern in v2 for rendering custom elements and passing attributes.

```svelte
<script>
	import { Label } from "formsnap";
</script>

<!-- Formsnap v1 (old) -->
<Label asChild let:labelAttrs>
	<label {...labelAttrs}>Name</label>
</Label>

<!-- Formsnap v2 (new) -->
<Label>
	{#snippet child({ props })}
		<label {...props}>Name</label>
	{/snippet}
</Label>
```

--------------------------------

### Define Zod Schema for Formsnap Settings

Source: https://github.com/svecosystem/formsnap/blob/main/docs/src/content/quick-start.md

Defines a Zod schema for form data validation, including enums for themes, languages, and allergies. This schema is used for both client-side and server-side validation.

```ts
import { z } from "zod";

export const themes = ["light", "dark"] as const;
export const languages = ["en", "es", "fr"] as const;
export const allergies = ["peanuts", "dairy", "gluten", "soy", "shellfish"] as const;

export const schema = z.object({
	email: z.string().email("Please enter a valid email."),
	bio: z.string().optional(),
	theme: z.enum(themes).default("light"),
	language: z.enum(languages).default("en"),
	marketingEmails: z.boolean().default(true),
	allergies: z.array(z.enum(allergies)),
});

```

--------------------------------

### Construct Form Field with Formsnap Field Component

Source: https://github.com/svecosystem/formsnap/blob/main/docs/src/content/quick-start.md

Demonstrates constructing a form field using Formsnap's `Field` component, passing the form context and field name. It includes nested `Control`, `Label`, and `input` elements for the email field.

```svelte
<script lang="ts">
	import { superForm } from "sveltekit-superforms";
	import { Field, Control, Label, Description, FieldErrors } from "formsnap";
	import { zodClient } from "sveltekit-superforms/adapters";
	import { allergies, schema, themes } from "./schema.js";
	import SuperDebug from "sveltekit-superforms";

	let { data } = $props();

	const form = superForm(data.form, {
		validators: zodClient(schema),
	});
	const { form: formData, enhance } = form;
</script>

<form method="POST" use:enhance>
	<Field {form} name="email">
		<Control>
			{#snippet children({ props })}
				<Label>Email</Label>
				<input {...props} type="email" bind:value={$formData.email} />
			{/snippet}
		</Control>
	</Field>
</form>
<SuperDebug data={$formData} />

```

--------------------------------

### Fieldset: Radio Group Example (Svelte)

Source: https://github.com/svecosystem/formsnap/blob/main/docs/src/content/components/fieldset.md

Demonstrates using the Fieldset component to group radio buttons for a single form field. It ensures related radio options are semantically grouped under a common legend, improving accessibility and usability. The example shows binding to a form data object and iterating over themes.

```svelte
<script>
	import { Fieldset, Legend, Control, Label, Description, FieldErrors } from '@svecodocs/kit';
	// Assuming 'form', 'themes', and '$formData' are defined elsewhere
	// export let form;
	// const themes = ['light', 'dark'];
	// let $formData = { theme: '' };
</script>

<Fieldset {form} name="theme">
	<Legend>Select your theme</Legend>
	{#each themes as theme}
		<Control>
			{#snippet children({ props })}
				<input {...props} type="radio" bind:group={$formData.theme} value={theme} />
				<Label>{theme}</Label>
			{/snippet}
		</Control>
	{/each}
	<Description>Help us understand your preferences by selecting a theme.</Description>
	<FieldErrors />
</Fieldset>
```

--------------------------------

### Svelte Superforms + Formsnap Signup Form

Source: https://github.com/svecosystem/formsnap/blob/main/docs/src/content/index.md

Demonstrates the same signup form using SvelteKit Superforms integrated with Formsnap components. This example highlights how Formsnap significantly reduces boilerplate code by abstracting accessibility attributes and error display. Dependencies include Svelte, SvelteKit Superforms, Formsnap, and Zod for validation.

```svelte
<script lang="ts">
	import { Field, Control, Label, FieldErrors, Description } from "formsnap";
	import { signupFormSchema } from "./schema.ts";
	import { zodClient } from "sveltekit-superforms/adapters";
	import { superForm } from "sveltekit-superforms";
	let { data } = $props();

	const form = superForm(data.form, {
		validators: zodClient(signupFormSchema),
	});
	const { form: formData, enhance } = form;
</script>

<form method="POST" use:enhance>
	<Field {form} name="name">
		<Control>
			{#snippet children({ props })}
				<Label>Name</Label>
				<input {...props} bind:value={$formData.name} />
			{/snippet}
		</Control>
		<Description>Be sure to use your real name.</Description>
		<FieldErrors />
	</Field>
	<Field {form} name="email">
		<Control>
			{#snippet children({ props })}
				<Label>Email</Label>
				<input {...props} type="email" bind:value={$formData.email} />
			{/snippet}
		</Control>
		<Description>It's preferred that you use your company email.</Description>
		<FieldErrors />
	</Field>
	<Field {form} name="password">
		<Control>
			{#snippet children({ props })}
				<Label>Password</Label>
				<input {...props} type="password" bind:value={$formData.password} />
			{/snippet}
		</Control>
		<Description>Ensure the password is at least 10 characters.</Description>
		<FieldErrors />
	</Field>
</form>
```

--------------------------------

### Setup Svelte Multi-Select Form

Source: https://github.com/svecosystem/formsnap/blob/main/docs/src/content/recipes/bits-ui-select.md

Integrates the `<Select />` component within a Svelte form using SvelteKit Superforms and Zod client-side validation. Manages form state and displays selected values dynamically.

```svelte
<script lang="ts">
	import { superForm } from "sveltekit-superforms";
	import { zodClient } from "sveltekit-superforms/adapters";
	import { Select } from "bits-ui";
	import { Field, Control, Label, FieldErrors, Description } from "formsnap";
	import { schema, colors } from "./schema.js";

	let { data } = $props();

	const form = superForm(data.form, {
		validators: zodClient(schema),
	});

	const { form: formData } = form;

	const selectedColors = $derived(
		$formData.colors.length ? $formData.colors.map((c) => colors[c]).join(",") : "Select colors"
	);
</script>

<form method="POST" use:form.enhance>
	<Field {form} name="colors">
		<Control>
			{#snippet children({ props })}
				<Label>Favorite colors</Label>
				<Select.Root type="multiple" bind:value={$formData.colors} name={props.name}>
					<Select.Trigger {...props}>
						{selectedColors}
					</Select.Trigger>
					<Select.Content>
						{#each Object.entries(colors) as [value, label]}
							<Select.Item {value} {label} />
						{/each}
					</Select.Content>
				</Select.Root>
			{/snippet}
		</Control>
		<Description>We'll use these colors to customize your experience.</Description>
		<FieldErrors />
	</Field>
	<button type="submit">Submit</button>
</form>
```

--------------------------------

### Migrate `el` prop to `ref` prop for element references (v1 vs v2)

Source: https://github.com/svecosystem/formsnap/blob/main/docs/src/content/v2-migration-guide.md

Illustrates the update from using the `el` prop in Formsnap v1 to the `$bindable` `ref` prop in v2 for obtaining references to underlying HTML elements.

```svelte
<script lang="ts">
	import { Label } from "formsnap";
</script>

<!-- Formsnap v1 (old) -->
<script lang="ts">
	let labelEl: HTMLLabelElement;
</script>
<Label bind:el={labelEl}>Name</Label>

<!-- Formsnap v2 (new) -->
<script lang="ts">
	let labelRef = $state<HTMLLabelElement | null>(null);
</script>
<Label bind:ref={labelRef}>Name</Label>
```

--------------------------------

### Control Component Usage Example

Source: https://github.com/svecosystem/formsnap/blob/main/docs/src/content/composition/use-form-control.md

Illustrates how a custom component like `LabelInput`, which utilizes `useFormControl`, is integrated within the Formsnap `Field` and `Control` components for managing form state.

```svelte
<script lang="ts">
    import { Field, Control } from '@svecodocs/formsnap';
    import LabelInput from './LabelInput.svelte';

    // Assuming 'form' is defined elsewhere, e.g., from useForm()
    // let form = useForm();
</script>

<Field {form} name="email">
	<Control>
		<LabelInput label="Email address" />
	</Control>
</Field>
```

--------------------------------

### Setup Form with Bits UI Select

Source: https://github.com/svecosystem/formsnap/blob/main/docs/src/content/recipes/bits-ui-select.md

A Svelte component that integrates Formsnap with the Bits UI Select component for single selection. It uses `sveltekit-superforms` for form handling and Zod for validation, displaying a language selection dropdown.

```svelte
<script lang="ts">
	import { superForm } from "sveltekit-superforms";
	import { zodClient } from "sveltekit-superforms/adapters";
	import { Select } from "bits-ui";
	import { Field, Control, Label, FieldErrors, Description } from "formsnap";
	import { schema, languages } from "./schema.js";

	let { data } = $props();

	const form = superForm(data.form, {
		validators: zodClient(schema),
	});

	const { form: formData, enhance } = form;

	const selectedLanguageLabel = $derived(
		$formData.language ? languages[$formData.language] : "Select a language"
	);
</script>

<form method="POST" use:enhance>
	<Field {form} name="language">
		<Control>
			{#snippet children({ props })}
				<Label>Language</Label>
				<Select.Root type="single" bind:value={$formData.language} name={props.name}>
					<Select.Trigger {...props}>
						{selectedLabel}
					</Select.Trigger>
					<Select.Content>
						{#each Object.entries(languages) as [value, label]}
							<Select.Item {value}>
								{label}
							</Select.Item>
						{/each}
					</Select.Content>
				</Select.Root>
			{/snippet}
		</Control>
		<Description>The docs will be translated to your preferred language.</Description>
		<FieldErrors />
	</Field>
	<button type="submit">Submit</button>
</form>
```

--------------------------------

### Import Formsnap Components for Form Structure

Source: https://github.com/svecosystem/formsnap/blob/main/docs/src/content/recipes/dynamic-fields.md

Imports necessary components from 'formsnap' for building structured forms, including Fieldset, Legend, ElementField, Control, Label, FieldErrors, and Description. This snippet shows the complete script setup for a Svelte page.

```svelte
<script lang="ts">
	import { superForm } from "sveltekit-superforms";
	import { zodClient } from "sveltekit-superforms/adapters";
	import {
		Fieldset,
		Legend,
		ElementField,
		Control,
		Label,
		FieldErrors,
		Description,
	} from "formsnap";
	import { schema } from "./schema.js";

	let { data } = $props();

	const form = superForm(data.form, {
		validators: zodClient(schema),
	});

	const { form: formData } = form;
</script>

<form use:form.enhance method="POST">
	<!-- ... -->
	<button type="submit">Submit</button>
</form>
```

--------------------------------

### Initialize SuperForm with Zod Validator

Source: https://github.com/svecosystem/formsnap/blob/main/docs/src/content/recipes/dynamic-fields.md

Initializes a SvelteKit SuperForm instance using the provided form data and a Zod validator. This setup enables client-side validation based on the defined schema.

```svelte
<script lang="ts">
	import { superForm } from "sveltekit-superforms";
	import { zodClient } from "sveltekit-superforms/adapters";
	import { schema } from "./schema.js";

	let { data } = $props();

	const form = superForm(data.form, {
		validators: zodClient(schema),
	});

	const { form: formData } = form;
</script>

<form use:form.enhance method="POST">
	<!-- ... -->
	<button type="submit">Submit</button>
</form>
```

--------------------------------

### Fieldset: Checkbox Group Example (Svelte)

Source: https://github.com/svecosystem/formsnap/blob/main/docs/src/content/components/fieldset.md

Illustrates the use of the Fieldset component for grouping multiple checkboxes, typically for fields that allow multiple selections. This structure helps in managing related options for a single form input, like listing user allergies. The example iterates through a list of allergies and binds to an array in the form data.

```svelte
<script>
	import { Fieldset, Legend, Control, Label, Description, FieldErrors } from '@svecodocs/kit';
	// Assuming 'form', 'allergies', and '$formData' are defined elsewhere
	// export let form;
	// const allergies = ['nuts', 'dairy', 'gluten'];
	// let $formData = { allergies: [] };
</script>

<Fieldset {form} name="allergies">
	<Legend>Any food allergies?</Legend>
	{#each allergies as allergy}
		<Control>
			{#snippet children({ props })}
				<input
					{...props}
					type="checkbox"
					bind:group={$formData.allergies}
					value={allergy}
				/>
				<Label>{allergy}</Label>
			{/snippet}
		</Control>
	{/each}
	<Description>We'll make sure to accommodate your dietary needs.</Description>
	<FieldErrors />
</Fieldset>
```

--------------------------------

### Custom Control Wrapper Component

Source: https://github.com/svecosystem/formsnap/blob/main/docs/src/content/components/control.md

Illustrates creating a custom wrapper component around the Control and Label components for consistent styling and behavior. This example automatically includes a Label and wraps the control content in a div with specific styling.

```svelte
<script lang="ts">
	import { Control, Label } from "formsnap";
	import type { ComponentProps } from "svelte";

	let { 
		label,
		// Rename the children prop to childrenProp to avoid
		// conflicts with the Control component
		children: childrenProp,
		...restProps
	}: ComponentProps<typeof Control> & { 
		label: string;
	} = $props();
</script>

<Control {...restProps}>
	{#snippet children({ props })}
		<div class="flex flex-col gap-2">
			<Label>{label}</Label>
			<!-- Forward the props to the children snippet -->
			{@render childrenProp({ props })}
		</div>
	{/snippet}
</Control>
```

--------------------------------

### Migrate `Control` component attribute passing (v1 vs v2)

Source: https://github.com/svecosystem/formsnap/blob/main/docs/src/content/v2-migration-guide.md

Details the change in the `Control` component from passing attributes via an `attrs` slot prop in v1 to using a `children` snippet prop in v2.

```svelte
<script lang="ts">
	import { Control } from "formsnap";
	// Assuming $formData is defined elsewhere
	let $formData: any;
</script>

<!-- Formsnap v1 (old) -->
<Control let:attrs>
	<input type="text" {...attrs} bind:value={$formData.name} />
</Control>

<!-- Formsnap v2 (new) -->
<Control>
	{#snippet children({ props })}
		<input type="text" {...props} bind:value={$formData.name} />
	{/snippet}
</Control>
```

--------------------------------

### Svelte: Dynamic Fields Setup with ElementField

Source: https://github.com/svecosystem/formsnap/blob/main/docs/src/content/recipes/dynamic-fields.md

This Svelte script sets up a component for creating dynamic fields, specifically a URLs field. It imports necessary UI components from '@svecodocs/kit' and custom components like `LoadingCard` and `DynamicFieldsForm`, preparing the environment for dynamic form element management using Formsnap's `ElementField`.

```svelte
<script>
	import { Steps, Step, Callout } from '@svecodocs/kit'
	import LoadingCard from '$lib/components/loading-card.svelte'
	import DynamicFieldsForm from '$lib/components/examples/dynamic-fields.svelte'
</script>
```

--------------------------------

### Composition Example: CustomElementField Wrapper (Svelte)

Source: https://github.com/svecosystem/formsnap/blob/main/docs/src/content/components/element-field.md

Illustrates creating a reusable `CustomElementField` component that wraps `ElementField` to include common elements like `FieldErrors` by default. This enhances consistency and simplifies form development by abstracting boilerplate code.

```svelte
<script lang="ts" module>
	import type { FormPathArrays, FormPathLeaves } from "sveltekit-superforms";
	to type T = Record<string, unknown>;
	to type U = unknown;
</script>

<script lang="ts" generics="T extends Record<string, unknown>, U extends FormPathLeaves<T>">
	import { ElementField, type ElementFieldProps, FieldErrors } from "formsnap";
	import type { SuperForm } from "sveltekit-superforms";

	let { form, name, children: childrenProp }: ElementFieldProps<T, U> = $props();
</script>

<ElementField {form} {name}>
	{#snippet children(snippetProps)}
		{@render childrenProp(snippetProps)}
	{/snippet}
	<FieldErrors />
</ElementField>
```

--------------------------------

### Migrate Slot Props to Snippet Props for Field Components (v1 vs v2)

Source: https://github.com/svecosystem/formsnap/blob/main/docs/src/content/v2-migration-guide.md

Shows the transition from using slot props like `value`, `errors`, `tainted`, and `constraints` in Formsnap v1 to accessing these via snippet props in v2.

```svelte
<script lang="ts">
	import { Field } from "formsnap";
	// Assuming 'form' is defined elsewhere
	let form: any;
</script>

<!-- Formsnap v1 (old) -->
<Field {form} name="name" let:value let:errors let:tainted let:constraints>
	<!-- Access slot props here -->
</Field>

<!-- Formsnap v2 (new) -->
<Field {form} name="name">
	{#snippet children({ value, errors, tainted, constraints })}
		<!-- Access snippet props here -->
	{/snippet}
</Field>

<!-- Or if snippet props are not needed -->
<Field {form} name="name">
	<!-- Form components here -->
</Field>
```

--------------------------------

### Formsnap v2: Use Form Control Getters

Source: https://github.com/svecosystem/formsnap/blob/main/docs/src/content/v2-migration-guide.md

Shows the Formsnap v2 usage of `useFormControl` for accessing reactive properties of a form control. It provides getters like `labelProps` and `props` for direct use in custom components, replacing the v1 `getFormControl`.

```svelte
<script lang="ts">
	import { useFormControl } from "formsnap";
	import { MyLabel, MyInput } from "$lib/components";

	let { label }: { label: string } = $props();

	const control = useFormControl();
</script>

<MyLabel {...control.labelProps}>
	{label}
</MyLabel>

<MyInput {...control.props} />
```

--------------------------------

### Migrate Form Field Access: `getFormField` to `useFormField` (v1 vs v2)

Source: https://github.com/svecosystem/formsnap/blob/main/docs/src/content/v2-migration-guide.md

Demonstrates the deprecation of `getFormField` in Formsnap v1 in favor of the new `useFormField` hook and reactive getter pattern in v2 for accessing form field state.

```svelte
<script lang="ts">
	import { getFormField } from "formsnap"; // v1
	// import { useFormField } from "formsnap"; // v2

	// Formsnap v1 (old)
	const { form, errors, tainted, constraints } = getFormField();

	// Formsnap v2 (new) - conceptual example
	// const { form, errors, tainted, constraints } = useFormField();
</script>

<!-- Formsnap v1 (old) -->
Errors for this field: {$errors}
Constraints for this field: {$constraints}
Is this field tainted? {$tainted}

<!-- Formsnap v2 (new) - conceptual example -->
<!-- Errors for this field: {$errors} -->
<!-- Constraints for this field: {$constraints} -->
<!-- Is this field tainted? {$tainted} -->
```

--------------------------------

### Formsnap v2: Use Form Field Getters

Source: https://github.com/svecosystem/formsnap/blob/main/docs/src/content/v2-migration-guide.md

Demonstrates the Formsnap v2 approach using `useFormField` to access reactive states for a form field. It returns getters for errors, constraints, and tainted status, emphasizing direct usage over destructuring.

```svelte
<script lang="ts">
	import { useFormField } from "formsnap";

	const field = useFormField();
</script>

Errors for this field: {field.errors}
Constraints for this field: {field.constraints}
Is this field tainted? {field.tainted}
```

--------------------------------

### Formsnap v1: Get Form Control Attributes

Source: https://github.com/svecosystem/formsnap/blob/main/docs/src/content/v2-migration-guide.md

Illustrates the Formsnap v1 method `getFormControl` for accessing attributes related to the closest parent `Control` component. This was used for building custom components that integrate labels and inputs.

```svelte
<script lang="ts">
	import { getFormControl } from "formsnap";
	import { MyLabel, MyInput } from "$lib/components";

	export let label: string;

	const { labelAttrs, attrs } = getFormControl();
</script>

<MyLabel {...$labelAttrs}>
	{label}
</MyLabel>

<MyInput {...$attrs} />
```

--------------------------------

### Create Svelte Project with sv CLI

Source: https://github.com/svecosystem/formsnap/blob/main/docs/README.md

Commands to create a new Svelte project. Use `npx sv create` for the current directory or `npx sv create <directory-name>` to specify a project folder.

```bash
npx sv create

npx sv create my-app
```

--------------------------------

### Build Svelte Project for Production

Source: https://github.com/svecosystem/formsnap/blob/main/docs/README.md

Command to create a production-ready build of the Svelte application. A preview command is also available to test the production build locally.

```bash
npm run build

You can preview the production build with `npm run preview`.
```

--------------------------------

### Svelte Superforms Only Signup Form

Source: https://github.com/svecosystem/formsnap/blob/main/docs/src/content/index.md

Demonstrates a basic signup form implementation using only SvelteKit Superforms. It showcases the amount of code required for accessibility attributes and error handling, highlighting the boilerplate involved. Dependencies include Svelte, SvelteKit Superforms, and Zod for validation.

```svelte
<script lang="ts">
	import type { PageData } from "./$types";
	import { superForm } from "sveltekit-superforms";
	import { zodClient } from "sveltekit-superforms/adapters";
	import { signupFormSchema } from "./schema";
	let { data } = $props();

	const { form, errors, enhance, constraints } = superForm(data.form, {
		validators: zodClient(signupFormSchema),
	});
</script>

<form method="POST" use:enhance>
	<label for="name">Name</label>
	<input
		id="name"
		name="name"
		aria-describedby={$errors.name ? "name-error name-desc" : "name-desc"}
		aria-invalid={$errors.name ? "true" : undefined}
		aria-required={$constraints.name?.required ? "true" : undefined}
		bind:value={$form.name}
	/>
	<span id="name-desc">Be sure to use your real name.</span>
	<span id="name-error" aria-live="assertive">
		{#if $errors.name.length}
			{#each $errors.name as err}
				{err}
			{/each}
		{/if}
	</span>
	<label for="email">Email</label>
	<input
		id="email"
		name="email"
		type="email"
		aria-describedby={$errors.email ? "email-error email-desc" : "email-desc"}
		aria-invalid={$errors.email ? "true" : undefined}
		aria-required={$constraints.email?.required ? "true" : undefined}
		bind:value={$form.email}
	/>
	<span id="email-desc">It's preferred that you use your company email.</span>
	<span id="email-error" aria-live="assertive">
		{#if $errors.email.length}
			{#each $errors.email as err}
				{err}
			{/each}
		{/if}
	</span>
	<label for="password">Password</label>
	<input
		id="password"
		name="password"
		type="password"
		aria-describedby={$errors.password ? "password-error password-desc" : "password-desc"}
		aria-invalid={$errors.password ? "true" : undefined}
		aria-required={$constraints.password?.required ? "true" : undefined}
		bind:value={$form.password}
	/>
	<span id="password-desc">Ensure the password is at least 10 characters.</span>
	<span id="password-error" aria-live="assertive">
		{#if $errors.password.length}
			{#each $errors.password as err}
				{err}
			{/each}
		{/if}
	</span>
	<button>Submit</button>
</form>
```

--------------------------------

### CustomField Wrapper Component

Source: https://github.com/svecosystem/formsnap/blob/main/docs/src/content/components/field.md

An example of creating a custom wrapper component around the Field component to automatically include common elements like FieldErrors and maintain type safety.

```svelte
<script lang="ts" module>
	import type { FormPath } from "sveltekit-superforms";

	// the form object
	ttype T = Record<string, unknown>;
	// the path/name of the field in the form object
	type U = unknown;
</script>

<script lang="ts" generics="T extends Record<string, unknown>, U extends FormPath<T>">
	import { Field, type FieldProps, FieldErrors } from "formsnap";
	import type { SuperForm } from "sveltekit-superforms";

	let { form, name, children: childrenProp }: FieldProps<T, U> = $props();
</script>

<Field {form} {name}>
	{#snippet children(snippetProps)}
		{@render childrenProp(snippetProps)}
		<FieldErrors />
	{/snippet}
</Field>
```

--------------------------------

### useFormControl API Reference

Source: https://github.com/svecosystem/formsnap/blob/main/docs/src/content/composition/use-form-control.md

Provides the API documentation for the `useFormControl` hook, detailing its available props and the structure of its return type. It highlights the reactive states provided for form control integration and a critical usage note.

```APIDOC
useFormControl(): FormControlContext

  Description:
    Hook to access the form control's state within the component context.

  Props:
    id: () => string | undefined | null
      Optional getter function to provide a custom ID, overriding the default control ID.

  Return Type:
    FormControlContext:
      {
        /** Reactive state containing the ID of the form control. */
        readonly id: string;

        /** Reactive state containing the attributes for the label element. */
        readonly labelProps: Record<string, unknown>;

        /** Reactive state containing the attributes for the control element. */
        readonly props: Record<string, unknown>;
      }

  Usage Note:
    The `useFormControl` function returns getters for reactive states. Destructuring the returned object is not recommended; use the getters directly.
```

--------------------------------

### Load Superform in SvelteKit Server (ts)

Source: https://github.com/svecosystem/formsnap/blob/main/packages/formsnap/README.md

Loads the Superform instance in a SvelteKit server load function using `sveltekit-superforms`. It initializes the form with a Zod schema adapter for server-side validation and prepares it for the Svelte component.

```ts
// +page.server.ts
import { superValidate } from "sveltekit-superforms";
import { zod } from "sveltekit-superforms/adapters";
import type { PageServerLoad } from "./$types";
import { settingsFormSchema } from "./schemas";

export const load: PageServerLoad = async () => {
	return {
		form: await superValidate(zod(settingsFormSchema)),
	};
};
```

--------------------------------

### SvelteKit Server Load and Actions with Zod Validation

Source: https://github.com/svecosystem/formsnap/blob/main/docs/src/content/recipes/checkbox-groups.md

Sets up SvelteKit server-side loading and form actions, using `sveltekit-superforms` and a Zod schema for validation. It handles form submission and returns validation results, integrating with the shared schema.

```typescript
import { superValidate } from "sveltekit-superforms";
import type { Actions, PageServerLoad } from "./$types";
import { schema } from "./+page.svelte";
import { zod } from "sveltekit-superforms/adapters";
import { fail } from "@sveltejs/kit";

export const load: PageServerLoad = async () => {
	return {
		form: await superValidate(zod(schema)),
	};
};

export const actions: Actions = {
	default: async (event) => {
		const form = await superValidate(event, zod(schema));

		if (!form.valid) {
			return fail(400, { form });
		}

		return { form };
	},
};
```

--------------------------------

### Usage Example: Dynamic URLs with ElementField (Svelte)

Source: https://github.com/svecosystem/formsnap/blob/main/docs/src/content/components/element-field.md

Demonstrates how to use `ElementField` within a `Fieldset` to manage dynamic array elements, like URLs. It shows integration with `sveltekit-superforms` for validation and state management, including handling array-level and element-level errors.

```svelte
<script lang="ts">
	import { ElementField, FieldErrors, Control, Label, Fieldset, Description } from "formsnap";
	import { superForm } from "sveltekit-superforms";
	import { zodClient } from "sveltekit-superforms/adapters";
	import { z } from "zod";

	const schema = z.object({
		urls: z.array(z.string().url()).min(2).default(["", ""]),
	});

	let { data } = $props();

	const form = superForm(data.form, {
		validators: zodClient(schema),
	});

	const { form: formData, enhance } = form;
</script>

<form use:enhance method="POST">
	<Fieldset {form} name="urls">
		<Legend>Enter your URLS</Legend>
		{#each $formData.urls as _, i}
			<ElementField {form} name="urls[{i}]">
				<Control>
					{#snippet children({ props })}
						<input type="url" bind:value={$formData.urls[i]} {...props} />
					{/snippet}
				</Control>
				<FieldErrors />
			</ElementField>
		{/each}
		<Description>Your URLs will be displayed on your public profile.</Description>
		<FieldErrors />
	</Fieldset>
	<button type="submit">Submit</button>
</form>
```

--------------------------------

### Initialize SuperForm with Zod Client Validation

Source: https://github.com/svecosystem/formsnap/blob/main/docs/src/content/recipes/multiple-select.md

Initializes a SvelteKit SuperForm with data from the load function and sets up Zod client-side validation using the zodClient adapter. This prepares the form for submission and client-side error handling.

```svelte
<script lang="ts">
	import { superForm } from "sveltekit-superforms";
	import { zodClient } from "sveltekit-superforms/adapters";
	import { schema, flavors, toppings } from "./schema.js";

	let { data } = $props();

	const form = superForm(data.form, {
		validators: zodClient(schema),
	});

	const { form: formData } = form;
</script>

<form use:form.enhance method="POST">
	<!-- ... -->
	<button type="submit">Submit</button>
</form>

```

--------------------------------

### Label Component Usage

Source: https://github.com/svecosystem/formsnap/blob/main/docs/src/content/components/label.md

Demonstrates how to use the Label component within a Control, showing how it associates with an input element without manual 'for' attribute management.

```svelte
<script>
	import { PropField } from '@svecodocs/kit'
</script>

<Field {form} name="name">
	<Control>
		{#snippet children({ props })}
			<Label>Name</Label>
			<input type="text" {...props} />
		{/snippet}
	</Control>
</Field>
```

--------------------------------

### Styling Formsnap Components in Svelte with Classes

Source: https://github.com/svecosystem/formsnap/blob/main/docs/src/content/styling.md

This Svelte example shows how to apply CSS classes directly to Formsnap components using the `class` prop. This method is ideal when integrating with CSS frameworks like TailwindCSS or UnoCSS, enabling easy application of utility classes for styling.

```svelte
import { Label } from "formsnap";

<form>
	<Label class="text-black hover:text-orange-500">First Name</Label>
</form>
```

--------------------------------

### Description Component Props API

Source: https://github.com/svecosystem/formsnap/blob/main/docs/src/content/components/description.md

Details the available props for the Description component, including references, child snippet handling, and spreading of additional HTML attributes. It outlines the expected types and usage for each prop.

```APIDOC
Description Component Props:

ref: HTMLElement | null
  - A reference to the underlying HTML element rendered by the Description component.
  - Example:
    <Description bind:ref={descriptionRef}>
      <!-- ... -->
    </Description>

child: Snippet
  - If provided, the Description component will not render an HTML element and will instead expect you to spread the snippet's props onto an element of your choosing.
  - See the [`child`](/docs/composition/child) snippet documentation for more information.

...rest: HTMLAttributes<HTMLElement>
  - Any additional props provided to the Description component will be spread onto the underlying HTML element.
  - Example:
    <Description class="my-custom-class" data-testid="field-description">
      <!-- ... -->
    </Description>
```

--------------------------------

### Fieldset Component API Reference (APIDOC)

Source: https://github.com/svecosystem/formsnap/blob/main/docs/src/content/components/fieldset.md

Provides a comprehensive reference for the Fieldset component's props and snippet props. It details each parameter, its type, whether it's required, and its purpose, along with information for composing custom elements using provided snippets.

```apidoc
Fieldset Component API:

Props:

  form: SuperForm<T>
    The form object returned from calling superForm in your component.
    Required.

  name: FormPath<T>
    The path to the field in the form object.
    Required.

  ref: HTMLElement | null
    A $bindable reference to the underlying HTML element rendered by the Fieldset component.

  child: Snippet
    If provided, the Fieldset component will not render an HTML element and will instead expect you to spread the snippet's props onto an element of your choosing.
    See the [child snippet documentation](/docs/composition/child) for more information.

  ...rest: HTMLAttributes<HTMLFieldSetElement>
    Any additional props provided to the Fieldset component will be spread onto the underlying HTML element.

Snippet Props (children):

  value: T[U]
    The value of the value store of the field.

  errors: string[] | undefined
    The value of the errors store for the field.

  constraints: Record<string, unknown>
    The constraints for the field.

  tainted: boolean
    Whether the field is tainted or not.

Snippet Props (child):

  props: Record<string, unknown>
    The props to spread onto your custom <fieldset> element/component.

  value: T[U]
    The value of the value store of the field.

  errors: string[] | undefined
    The value of the errors store for the field.

  constraints: Record<string, unknown>
    The constraints for the field.

  tainted: boolean
    Whether the field is tainted or not.
```

--------------------------------

### Control Component Usage

Source: https://github.com/svecosystem/formsnap/blob/main/docs/src/content/components/control.md

Demonstrates the basic usage of the Control component in a Svelte page. It shows how to bind a form input's value using the children snippet prop, which receives necessary attributes for the control.

```svelte
<script>
	import { Callout, PropField } from '@svecodocs/kit'
</script>

<Control>
	{#snippet children({ props })}
		<input type="text" {...props} bind:value={$formData.name} />
	{/snippet}
</Control>
```

--------------------------------

### Handle Form Submission with SvelteKit Superforms (TS)

Source: https://github.com/svecosystem/formsnap/blob/main/docs/src/content/recipes/checkbox-groups.md

This code demonstrates server-side form handling in SvelteKit using `sveltekit-superforms`. It loads the form with the defined Zod schema and processes submissions, returning validation errors or success data.

```ts
import { superValidate } from "sveltekit-superforms";
import type { Actions, PageServerLoad } from "./$types";
import { schema } from "./+page.svelte";
import { zod } from "sveltekit-superforms/adapters";
import { fail } from "@sveltejs/kit";

export const load: PageServerLoad = async () => {
	return {
		form: await superValidate(zod(schema)),
	};
};

export const actions: Actions = {
	default: async (event) => {
		const form = await superValidate(event, zod(schema));

		if (!form.valid) {
			return fail(400, { form });
		}

		return { form };
	},
};

```