{"slug":"form","name":"Form","packageName":"@liquidify/react","category":"presentational","maturity":"experimental","summary":"Lay out a settings-style screen as sections of related controls, each with an optional heading and explanatory footnote — \"Profile\" (name, theme), \"Preferences\" (notifications, volume) — without hand-building the grouped-card chrome per screen.","importPath":"@liquidify/react/form","sourcePath":"packages/@liquidify/react/src/components/form/form.tsx","specPath":"packages/@liquidify/react/src/components/form/spec.md","docsPath":"../liquidify-page/content/component-source/form.md","documentationStatus":"draft","storyIds":["presentational-form--default"],"additionalExports":["ControlProps","FormBodyProps","FormHeaderProps","LabelProps","Section","SectionProps"],"anatomy":[{"name":"Form","description":"Form — (.lq-form). Contains its"},{"name":"Section","description":"Section — wrapping, in fixed"},{"name":"Form.Section","description":"Form.Section — Section re-attached as a static property of Form"},{"name":"Form.Body","description":"Form.Body — the shared Card primitive with the lq-form-body"},{"name":"Form.Header","description":"Form.Header — , the"},{"name":"Form.Footer","description":"Form.Footer — , the"}],"props":[{"name":"children","type":"ReactNode","required":true,"description":"The Section stack (SwiftUI `Form(content:)` `{ … }` content closure). children role: `items` (charter §8) — {@link Section} / {@link Form.Body} / {@link Form.Header} / {@link Form.Footer} are the only documented direct slots. Strict, but non-destructive: any other direct child — including a `Fragment` wrapping otherwise-valid slots, which `Children.toArray` does NOT unwrap, mirroring `SegmentedControl`'s identical Fragment posture — is a dev-mode `console.error` and still renders verbatim (pass-through — `Form` never filters, unlike `SegmentedControl`'s `.Item`-only filtering) so a production build never throws or drops content. Spread `Section`/ `Form.Body`/`Form.Header`/`Form.Footer` as direct top-level children rather than wrapping them in a `Fragment`.","declaredIn":"packages/@liquidify/react/src/components/form/form.tsx"},{"name":"className","type":"string | undefined","required":false,"description":"Optional additional CSS class merged into the glass surface class. The supported per-instance customisation seam: override any `--lq-*` custom property from this class's CSS — the token cascade the engine reads (ADR-0004). No raw inline style is involved, so this stays ADR-0003 clean.","declaredIn":"packages/@liquidify/react/src/liquid-component-props.ts"},{"name":"ref","type":"Ref<HTMLDivElement> | undefined","required":false,"description":"Forwarded ref to the rendered element — the component's native root (or the merged child element on a component that opts into {@link SlottableProps}). Generic over `E` (charter `docs/api-conventions.md` §4 rule 1, default `HTMLElement`) so a component with a polymorphic root (Link's navigation / action mode union, Text's `as`) can instantiate the concrete element per variant instead of leaving every consumer with a widened `Ref<HTMLElement>`. A component that does not narrow simply inherits the `HTMLElement` default — source-compatible with every pre-existing non-generic `extends ControlProps`.","declaredIn":"packages/@liquidify/react/src/liquid-component-props.ts"}],"swiftUIMap":[{"swiftUI":"`Form(content:)`","react":"`children: ReactNode` (required)","notes":"**children role: `items`** (charter §8) — `Section` / `Form.Body` / `Form.Header` / `Form.Footer` only. Strict direct-slot semantics: any other direct child — including a `Fragment` wrapping otherwise-valid slots, which `Children.toArray` does NOT unwrap — is a dev-mode `console.error` (still rendered — pass-through, mirroring `SegmentedControl`'s identical fragment/wrapper diagnostic, audit §7); production builds render silently. Spread slot elements as direct top-level children rather than wrapping them in a `Fragment`.","relationship":"direct"},{"swiftUI":"`.scrollContentBackground(.hidden)`","react":"—","notes":"`Form`'s root is always transparent (v1 has no page-fill prop); matches the demo's exercised `.scrollContentBackground(.hidden)` shape unconditionally.","relationship":"direct"},{"swiftUI":"`.frame(height:)`","react":"—","notes":"Demo-local layout, not a component prop.","relationship":"direct"},{"swiftUI":"`Form(_ configuration:)` / `FormStyle` protocol","react":"— (out of scope v1)","notes":"Only the default grouped style is exercised; no custom-style plumbing.","relationship":"direct"},{"swiftUI":"`controlSize` / `.tint(_:)`","react":"—","notes":"Non-sizable; `Form` has no tint surface.","relationship":"direct"}],"tokens":["--lq-card-hpad","--lq-card-pad","--lq-card-thumb-h","--lq-card-track-h","--lq-color-bg-primary","--lq-color-bg-secondary","--lq-color-label-","--lq-color-label-primary","--lq-color-label-secondary","--lq-color-system-gray-5-default-dark","--lq-font-size-caption1","--lq-font-size-headline","--lq-form-gap","--lq-form-hpad","--lq-form-pad","--lq-form-thumb-h","--lq-form-track-h","--lq-glass-","--lq-radius-14","--lq-section-footer-gap","--lq-section-header-gap","--lq-section-hpad","--lq-section-pad","--lq-section-thumb-h","--lq-section-track-h","--lq-section-vpad","--lq-space-","--lq-space-16","--lq-space-8"],"keyboard":[],"variants":[],"variantPages":[]}