Selection Card

<FodSelectionGroup @bind-Value="_plan" AriaLabel="Choose a plan">
    <FodSelectionCard Value="@("basic")" IsRecommended="true">
        <Header><strong>Basic</strong></Header>
        <ChildContent>Free — 5 GB storage, up to 3 users.</ChildContent>
    </FodSelectionCard>
    <FodSelectionCard Value="@("pro")">
        <Header><strong>Pro</strong></Header>
        <ChildContent>$9/month — 50 GB storage, unlimited users.</ChildContent>
    </FodSelectionCard>
    <FodSelectionCard Value="@("enterprise")">
        <Header><strong>Enterprise</strong></Header>
        <ChildContent>Custom pricing — unlimited everything.</ChildContent>
    </FodSelectionCard>
</FodSelectionGroup>

@code {
    private string? _plan;
}

<FodSelectionGroup @bind-Value="_shipping">
    <FodSelectionCard Value="@("standard")">
        <Header><strong>Standard</strong></Header>
        <ChildContent>5–7 business days · Free</ChildContent>
    </FodSelectionCard>
    <FodSelectionCard Value="@("express")" IsRecommended="true">
        <Header><strong>Express</strong></Header>
        <ChildContent>2–3 business days · $5.99</ChildContent>
    </FodSelectionCard>
</FodSelectionGroup>

@code {
    private string? _shipping;   // null → "express" will be pre-selected on load
}

@* End (default) *@
<FodSelectionCard Value="@("a")" RadioPosition="CardRadioPosition.End">
    <Header><strong>Option A</strong></Header>
    <ChildContent>Radio on the right.</ChildContent>
</FodSelectionCard>

@* Start *@
<FodSelectionCard Value="@("a")" RadioPosition="CardRadioPosition.Start">
    <Header><strong>Option A</strong></Header>
    <ChildContent>Radio on the left.</ChildContent>
</FodSelectionCard>

<FodSelectionGroup @bind-Value="_plan">
    <InfoBanner>
        <FodIcon Icon="IconName.CircleInfo" Color="IconColor.Brand"/>
        <span>All plans include a 30-day free trial.</span>
    </InfoBanner>
    <FodSelectionCard Value="@("starter")" IsRecommended="true">
        <Header><strong>Starter</strong></Header>
        <ChildContent>Free forever for small teams.</ChildContent>
    </FodSelectionCard>
    <FodSelectionCard Value="@("growth")">
        <Header><strong>Growth</strong></Header>
        <ChildContent>$29/month for growing teams.</ChildContent>
    </FodSelectionCard>
</FodSelectionGroup>

<FodSelectionGroup @bind-Value="_priority">
    <FodSelectionCard Value="Priority.Low">
        <Header><strong>Low</strong></Header>
        <ChildContent>Processed within 5 business days.</ChildContent>
    </FodSelectionCard>
    <FodSelectionCard Value="Priority.Normal" IsRecommended="true">
        <Header><strong>Normal</strong></Header>
        <ChildContent>Processed within 2 business days.</ChildContent>
    </FodSelectionCard>
    <FodSelectionCard Value="Priority.High">
        <Header><strong>High</strong></Header>
        <ChildContent>Processed within 4 hours.</ChildContent>
    </FodSelectionCard>
</FodSelectionGroup>

@code {
    public enum Priority { Low, Normal, High }
    private Priority _priority;
}

<FodSelectionGroup @bind-Value="_value">
    <FodSelectionCard Value="@("a")" Xs="Span.Col12" Md="Span.Col6" Lg="Span.Col6">
        <Header><strong>Option A</strong></Header>
        <ChildContent>Half-width on desktop.</ChildContent>
    </FodSelectionCard>
    <FodSelectionCard Value="@("b")" Xs="Span.Col12" Md="Span.Col6" Lg="Span.Col6">
        <Header><strong>Option B</strong></Header>
        <ChildContent>Half-width on desktop.</ChildContent>
    </FodSelectionCard>
</FodSelectionGroup>

<FodSelectionGroup @bind-Value="_value" AriaLabel="Required selection" Required="true">
    <FodSelectionCard Value="@("yes")">
        <Header><strong>Yes</strong></Header>
        <ChildContent>I accept the terms.</ChildContent>
    </FodSelectionCard>
    <FodSelectionCard Value="@("no")">
        <Header><strong>No</strong></Header>
        <ChildContent>I do not accept.</ChildContent>
    </FodSelectionCard>
</FodSelectionGroup>