Form

Overview

Form is a thin native form root that exposes asynchronous submission state to its child snippet and ignores duplicate submissions while the current handler is pending.

Use native validation and form controls as usual. The component owns only submit coordination; it does not replace native serialization, validation, or reset behavior.

Usage

<script lang="ts">
  import { Form } from '@lostgradient/cinder';
  import { Input } from '@lostgradient/cinder';
  import { Button } from '@lostgradient/cinder';
</script>

<Form onSubmit={() => undefined}>
  {#snippet children({ submitting })}
    <Input id="form-name" name="name" label="Name" value="" disabled={submitting} />
    <Button type="submit" disabled={submitting}>Save</Button>
  {/snippet}
</Form>

onSubmit may return a promise. While it is pending, the child snippet receives { submitting: true }; duplicate submits are ignored until the handler settles. Native form serialization, constraint validation, reset behavior, and the submit event remain the browser's responsibility. If the handler rejects, catch it in the host and keep the controls mounted so the user can correct and resubmit.

Live preview

When to use

Use when

A form needs a shared pending state while an asynchronous submit handler runs.

Avoid when

Submission is entirely native and no pending UI needs to be coordinated.

Examples

Basic form

Native form submission with Cinder controls.

Props

Props for form
Name	Type	Default	Description
`onSubmit`	`(event: SubmitEvent) => void\|Promise<void>`		May return a promise; while pending, the child snippet receives `{ submitting: true }` and duplicate submits are ignored until it settles.
`children`	`snippet`		Form controls. Receives `{ submitting }` so descendants can disable themselves while `onSubmit` is pending.