# Form

A complete form implementation with validation and submission handling.

## Installation

Start from a Svelte 5 application, then install the component package, shared theme, and Bits UI peer:

```bash
pnpm add coss-svelte @coss-svelte/theme bits-ui
```

Import `@coss-svelte/theme/style-coss.css` after Tailwind from the application's global stylesheet.

## Usage

```svelte
<script lang="ts">
import { Button, Field, FieldError, FieldLabel, Form, Input } from "coss-svelte";

let email = $state("");
let invalid = $state(false);
let loading = $state(false);
let submittedValue = $state("");

async function handleSubmit(event: SubmitEvent & { currentTarget: HTMLFormElement }) {
	event.preventDefault();
	invalid = !email.includes("@");
	if (invalid) return;

	loading = true;
	await new Promise((resolve) => setTimeout(resolve, 800));
	submittedValue = String(new FormData(event.currentTarget).get("email") ?? "");
	loading = false;
}
</script>

<Form class="flex w-full max-w-64 flex-col gap-4" novalidate onsubmit={handleSubmit}>
	<Field {invalid}>
		<FieldLabel>Email</FieldLabel>
		<Input bind:value={email} name="email" placeholder="you@example.com" required type="email" />
		{#if invalid}
			<FieldError>Please enter a valid email.</FieldError>
		{/if}
	</Field>
	<Button {loading} type="submit">Submit</Button>
	{#if submittedValue}
		<output class="text-muted-foreground text-sm">Submitted: {submittedValue}</output>
	{/if}
</Form>

```

## Anatomy

- `Form`

## API Reference

### Form

A complete form implementation with validation and submission handling.

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Svelte <form> attributes](https://svelte.dev/docs/svelte/basic-markup#Attributes).

## Implementation Details

| Field | Value |
| --- | --- |
| Status | Stable |
| Foundation | native |
| Category | Forms & Validation |
| Particles | 2 |

## Status

Stable for the current coss-svelte surface.

## Agent Notes

- Import Svelte exports directly from `coss-svelte`.
- This is Svelte 5 code: use `class`, lowercase event properties, runes, snippets, and documented `bind:*` contracts. Do not emit JSX, React hooks, `className`, `asChild`, or Base UI imports.
- Prefer this route's example and generated API table over React COSS snippets; COSS React particles are design references only.
- The copy-and-own registry is a preview. Inspect `/r/form.json` for the complete local file and dependency closure.
- Form is stable in the current source catalog.