Component catalog
Browse the public controls by interaction purpose. Every result links to generated API facts, accessibility behavior, source, and exhaustive stories.
Browse the public controls by interaction purpose. Every result links to generated API facts, accessibility behavior, source, and exhaustive stories.
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.
import { Form } from "@liquidify/react/form"| Prop | Type | Default | Description |
|---|---|---|---|
| children required | ReactNode | — | 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`. |
| className | string | undefined | — | 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. |
| ref | Ref<HTMLDivElement> | undefined | — | 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`. |
Form preserves the semantics of its content and should be given a clear accessible label when its visible content does not provide one.
| Name | Value |
|---|---|
| --lq-card-hpad | Component-defined value |
| --lq-card-pad | var(--lq-space-16) |
| --lq-card-thumb-h | Component-defined value |
| --lq-card-track-h | Component-defined value |
| --lq-color-bg-primary | #ffffff |
| --lq-color-bg-secondary | #f2f2f7 |
| --lq-color-label- | #000000#ffffffrgba(60, 60, 67, 0.6)rgba(235, 235, 245, 0.6)rgba(60, 60, 67, 0.3)rgba(235, 235, 245, 0.3)rgba(60, 60, 67, 0.18)rgba(235, 235, 245, 0.16)rgba(60, 60, 67, 0.8)rgba(235, 235, 245, 0.8)rgba(60, 60, 67, 0.4)rgba(235, 235, 245, 0.36) |
| --lq-color-label-primary | Component-defined value |
| --lq-color-label-secondary | Component-defined value |
| --lq-color-system-gray-5-default-dark | #2c2c2e |
| --lq-font-size-caption1 | 0.625rem |
| --lq-font-size-headline | 0.8125rem |
| --lq-form-gap | var(--lq-space-24) |
| --lq-form-hpad | Component-defined value |
| --lq-form-pad | var(--lq-space-16) |
| --lq-form-thumb-h | Component-defined value |
| --lq-form-track-h | Component-defined value |
| --lq-glass- | 440.71.15var(--lq-segmented-control-indicator-blur)calc(var(--lq-glass-material-blur) * 8)var(--lq-shadow-presentational) |
| --lq-radius-14 | 0.875rem |
| --lq-section-footer-gap | 0 |
| --lq-section-header-gap | 0 |
| --lq-section-hpad | Component-defined value |
| --lq-section-pad | var(--lq-space-16) |
| --lq-section-thumb-h | Component-defined value |
| --lq-section-track-h | Component-defined value |
| --lq-section-vpad | var(--lq-space-8) |
| --lq-space- | 0.0625rem0.125rem0.25rem0.5rem0.75rem1rem1.25rem1.5rem2rem2.5rem3rem3.5rem |
| --lq-space-16 | 1rem |
| --lq-space-8 | 0.5rem |