Components / Form
Form
Form container with submit handling, loading state, error summary, and field gap control.
forms v0.1.0
Playground
Examples
Contact form
<cg-form name="contact" gap="md" style="max-width:360px;"><cg-input label="Full Name" placeholder="John Doe"></cg-input><cg-input label="Email" type="email" placeholder="you@example.com"></cg-input><cg-textarea label="Message" placeholder="Write something..."></cg-textarea><cg-button type="submit">Send Message</cg-button></cg-form>Per-field errors
<cg-form name="validation" gap="md" style="max-width:360px;"><cg-input label="Email" type="email" error helper="Email is required"></cg-input><cg-input label="Password" type="password" error helper="Must be at least 8 characters" value="abc"></cg-input><cg-button type="submit">Sign Up</cg-button></cg-form>Loading
<cg-form name="loading" gap="md" loading style="max-width:360px;"><cg-input label="Email" value="john@example.com"></cg-input><cg-input label="Password" type="password" value="secret123"></cg-input><cg-button type="submit">Signing in...</cg-button></cg-form>Error summary
<cg-form name="summary" gap="md" style="max-width:360px;"><cg-input label="Email" error></cg-input><cg-input label="Password" type="password" error></cg-input><cg-button type="submit">Submit</cg-button></cg-form>Import
import { CgForm } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/cg-form';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | — | Form name identifier |
gap | "sm" | "md" | "lg" | "md" | Gap between fields — sm (8px), md (16px), lg (24px) |
loading | boolean | false | Loading state — disables all interactions |
Events
| Event | Detail | Description |
|---|---|---|
cg-submit | {name: string} | On form submit (Enter or button click) |
cg-reset | {} | After programmatic reset |