atom
gy-form
Form host primitive that wraps a native form and re-emits submit and reset as framework-agnostic gy-submit and gy-reset custom events.
Live
What you ship.
variant="comfortable"variant="compact"Markup
<gy-form variant="comfortable" size="md">
<gy-form-field label="Email" required><input name="email" type="email" /></gy-form-field>
<gy-button variant="primary" type="submit">Save</gy-button>
</gy-form>Prop space
Tier
Tag
Variants
Sizes
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'comfortable' | 'compact' | 'comfortable' | Density variant — `comfortable` default; `compact` for inline filters. |
size | 'sm' | 'md' | 'lg' | 'md' | Control density shared with sibling form primitives. |
pending | boolean | false | True while an async submit is in flight; suppresses gy-submit. |
noValidate | boolean | false | Mirrors native `<form novalidate>`; lets the caller own validation. |
onsubmit | (ev: CustomEvent<{ formData: FormData; form: HTMLFormElement }>) => void; /** Handler for the gy-reset CustomEvent. `detail.form` is the inner form. */ onreset?: (ev: CustomEvent<{ form: HTMLFormElement }>) => void; /** The form body (fields, fieldsets, action row). */ children?: Snippet; /** Top-of-form error banner; rendered with token-styled chrome when filled. */ errorSummary?: Snippet; | no default | Handler for the gy-submit CustomEvent. `detail.formData` is a FormData snapshot of the inner form; `detail.form` is the form element itself. Suppressed while `pending`. |
Where this lives
import '@gyrum-labs/components/form/form.js';