Skip to content
Form Patterns

Form

A form element wrapper with built-in vertical stack layout and configurable gap spacing. Provides consistent structure for form pages.

Sourcesrc/components/ui/form.tsx
Profile

Basic information about your account.

Import

import { Form } from "@mikenotthepope/substrateui"

Gap Variants

Adjust the gap prop to control vertical spacing between form children. The default value of "xl" works well for most forms with distinct sections.

API Reference

PropTypeDefaultDescription
gap"none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl""xl"Vertical spacing between child elements. Uses the Stack component internally for layout.
onSubmit(e: React.FormEvent) => void—Form submission handler.
classNamestring—Additional CSS classes to apply to the form element.
children
required
React.ReactNode—Form content, typically Field components, FormSections, and FormActions.