Form Section
Install this component from the Scintillar registry.
Profile
Update your profile information
Controls
Source
"use client"
import { cn } from "@/lib/utils"
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card"
import { Separator } from "@/components/ui/separator"
export interface FormSectionProps {
/** Section title. */
title: string
/** Optional description below the title. */
description?: string
/** Form fields content. */
children: React.ReactNode
/** Footer content (e.g., save/cancel buttons). */
footer?: React.ReactNode
/** Whether to show a separator between content and footer. */
footerSeparator?: boolean
/** Whether this section represents a dangerous/destructive action. */
destructive?: boolean
/** Additional CSS classes. */
className?: string
}
/**
* A standardized form section container using Card. Ensures visual uniformity
* across form layouts with title, description, content area, and optional footer.
*/
export function FormSection({
title,
description,
children,
footer,
footerSeparator = true,
destructive = false,
className,
}: FormSectionProps) {
return (
<Card
className={cn(
destructive && "border-destructive/50",
className
)}
>
<CardHeader>
<CardTitle
className={cn(
"text-lg",
destructive && "text-destructive"
)}
>
{title}
</CardTitle>
{description && (
<CardDescription>{description}</CardDescription>
)}
</CardHeader>
<CardContent>{children}</CardContent>
{footer && (
<>
{footerSeparator && <Separator />}
<CardFooter
className={cn(
"justify-end gap-2 pt-4",
destructive && "bg-destructive/5"
)}
>
{footer}
</CardFooter>
</>
)}
</Card>
)
}