Form Section

PreviousNext

Inset card section for grouping form fields, headings, actions, and submission feedback.

Request access

Zod errors are passed directly to each form component.

No card required.

Installation

pnpm dlx shadcn@latest add https://matos-ui.com/r/form-section.json

Usage

import { FormSection } from "@/components/matos-ui/form-section"

<FormSection
  title="Account details"
  description="Information used to personalize your workspace."
  footer={<Button type="submit">Continue</Button>}
>
  <FormGrid>{fields}</FormGrid>
</FormSection>

Use size="compact" for embedded panels or size="roomy" when the form is the page focus.