Field Panel Component

Patient NameLabel

Aung Myo Tun

Father NameRequired

San Lwin

Date of BirthLabel

15 Jan 1990

Gender

Male

<FieldPanel Variant="card"
            Label="Patient Name"
            Value="Aung Myo Tun"
            BadgeText="Label" />

<FieldPanel Variant="card"
            Label="Gender"
            Value="Male"
            ShowBadge="false" />

Patient NameLabel

Aung Myo Tun

Father NameRequired

San Lwin

Date of BirthLabel

15 Jan 1990

Gender

Male

<FieldPanel Variant="accent"
            Label="Patient Name"
            Value="Aung Myo Tun"
            BadgeText="Label" />

Email

phoenix@untitledui.com

Phone

+1 (555) 000-0000

Location

Melbourne, VIC

Timezone

PST (UTC-8)

<FieldPanel Variant="card"
            Label="Email"
            Value="phoenix@untitledui.com"
            ShowBadge="false" />

PlanActive

Professional

Billing

Monthly

Next Invoice

March 25, 2026

Primary ContactOwner

Phoenix Baker

Secondary ContactAdmin

Lana Steiner

@* 3-column grid *@
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem;">
    <FieldPanel Variant="card" Label="Plan" Value="Professional" BadgeText="Active" />
    <FieldPanel Variant="card" Label="Billing" Value="Monthly" ShowBadge="false" />
    <FieldPanel Variant="card" Label="Next Invoice" Value="March 25, 2026" ShowBadge="false" />
</div>

@* 2-column grid *@
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem;">
    <FieldPanel Variant="accent" Label="Primary Contact" Value="Phoenix Baker" BadgeText="Owner" />
    <FieldPanel Variant="accent" Label="Secondary Contact" Value="Lana Steiner" BadgeText="Admin" />
</div>

StatusActive

Connected

PriorityHigh

Needs attention

Assigned

PB

Phoenix Baker

<FieldPanel Variant="card">
    <LabelContent>
        <span class="field-panel-label-text">Status</span>
    </LabelContent>
    <BadgeContent>
        <Badge Color="success" Size="sm" Text="Active" />
    </BadgeContent>
    <ValueContent>
        <span style="color: var(--text-success-primary);">Connected</span>
    </ValueContent>
</FieldPanel>

Field Panel Component

Variant: Card

Variant: Accent

Without badges

Grid layouts

Custom content