Form Section Component
Titled card container for grouping related form fields into logical sections.
Default
Title + description + field grid
Personal Information
Basic demographic information for identification
razor
<FormSection Title="Personal Information"
Description="Basic demographic information for identification">
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-xl);">
<InputField Label="First Name" Placeholder="John" />
<InputField Label="Last Name" Placeholder="Smith" />
<InputField Label="Email" Type="email" />
<InputField Label="Phone" Type="tel" />
</div>
</FormSection>Without description
Title only header
Additional Notes
razor
<FormSection Title="Additional Notes">
<InputField Label="Notes" Placeholder="Any additional information..." />
</FormSection>With actions
Actions slot in the header row
Personal Information
Basic demographic information for identification
Notifications
Choose how you want to be notified
razor
<FormSection Title="Personal Information"
Description="Basic demographic information for identification">
<Actions>
<Button Variant="tertiary" Size="sm" Text="Reset" />
<Button Variant="primary" Size="sm" Text="Save changes" />
</Actions>
<ChildContent>
<InputField Label="First Name" Placeholder="John" />
<InputField Label="Last Name" Placeholder="Smith" />
</ChildContent>
</FormSection>Color variants
Default, error, warning, success, brand
Default section
Standard border color for general form sections
Error / Consent section
Highlighted border for critical acknowledgements
Warning section
Calls attention to sections that need review
Success section
Indicates a completed or validated section
Brand section
Brand-accented section for primary workflows
razor
@* Color values: default, error, warning, success, brand *@
<FormSection Title="Default section" Color="default"> ... </FormSection>
<FormSection Title="Error section" Color="error"> ... </FormSection>
<FormSection Title="Warning section" Color="warning"> ... </FormSection>
<FormSection Title="Success section" Color="success"> ... </FormSection>
<FormSection Title="Brand section" Color="brand"> ... </FormSection>Multi-section form example
Stacked sections with mixed colors
Contact Information
How to reach the patient and their emergency contact
Consent & Acknowledgement
Required agreements before registration can be completed
razor
<FormSection Title="Contact Information" Description="How to reach the patient">
<!-- fields -->
</FormSection>
<FormSection Title="Consent & Acknowledgement"
Description="Required agreements before registration"
Color="error">
<Checkbox Label="I confirm the information is accurate." Size="md" />
<Checkbox Label="I consent to the collection of this information." Size="md" />
</FormSection>