Form Section Component

Personal Information

Basic demographic information for identification

First Name

Last Name

Email

Phone

<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>

Additional Notes

Notes

<FormSection Title="Additional Notes">
    <InputField Label="Notes" Placeholder="Any additional information..." />
</FormSection>

Personal Information

Basic demographic information for identification

First Name

Last Name

Notifications

Choose how you want to be notified

Email notifications SMS notifications Push notifications

<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>

Default section

Standard border color for general form sections

Field

Error / Consent section

Highlighted border for critical acknowledgements

I confirm that the information provided is accurate and complete. I consent to data processing in accordance with regulations.

Warning section

Calls attention to sections that need review

Field

Success section

Indicates a completed or validated section

Field

Brand section

Brand-accented section for primary workflows

Field

@* 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>

Contact Information

How to reach the patient and their emergency contact

Phone Number*

Email Address

Street Address

City

State

Consent & Acknowledgement

Required agreements before registration can be completed

I confirm that the information provided is accurate and complete. I consent to the collection and processing of this information.

<FormSection Title="Contact Information" Description="How to reach the patient">
    <!-- fields -->
</FormSection>

<FormSection Title="Consent &amp; 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>

Form Section Component

Default

Personal Information

Without description

Additional Notes

With actions

Personal Information

Notifications

Color variants

Default section

Error / Consent section

Warning section

Success section

Brand section

Multi-section form example

Contact Information

Consent & Acknowledgement