Radio Group

from starhtml import *

Div(
    RadioGroupWithLabel(
        label="Size",
        options=[
            {"value": "sm", "label": "Small"},
            {"value": "md", "label": "Medium"},
            {"value": "lg", "label": "Large"},
        ],
        orientation="horizontal",
        value="md",
        helper_text="Choose the appropriate size"
    ),
    cls="max-w-lg"
)

from starhtml import *

Div(
    RadioGroupWithLabel(
        label="Per-item disabled",
        options=[
            {"value": "active", "label": "Active"},
            {"value": "inactive", "label": "Inactive", "disabled": True},
            {"value": "pending", "label": "Pending"},
        ],
        value="active",
    ),
    RadioGroupWithLabel(
        label="Fully disabled",
        options=[
            {"value": "on", "label": "On"},
            {"value": "off", "label": "Off"},
        ],
        value="on",
        disabled=True,
    ),
    RadioGroupWithLabel(
        label="Required field",
        options=[
            {"value": "yes", "label": "Yes"},
            {"value": "no", "label": "No"},
        ],
        required=True,
    ),
    RadioGroupWithLabel(
        label="With error",
        options=[
            {"value": "a", "label": "Option A"},
            {"value": "b", "label": "Option B"},
        ],
        error_text="Please select an option to continue",
        disabled=True,
    ),
    cls="grid w-full max-w-sm gap-6"
)

from starhtml import *

Card(
    CardHeader(
        CardTitle("Contact Preference"),
        CardDescription("How should we reach you?")
    ),
    CardContent(
        Form(
            (contact := Signal("contact", "")),
            RadioGroupWithLabel(
                label="Preferred method",
                options=[
                    {"value": "email", "label": "Email"},
                    {"value": "phone", "label": "Phone"},
                    {"value": "post", "label": "Postal mail"},
                ],
                signal=contact,
                required=True,
            ),
            Button(
                "Submit",
                type="submit",
                data_attr_disabled=~contact,
                data_on_click=(js("alert(`Preference: ${$contact}`)"), dict(prevent=True)),
                cls="mt-4 w-full"
            ),
        )
    ),
    cls="max-w-sm"
)

from starhtml import *

deploy = Signal("deploy_region", "us-east")

def RegionCard(value, name, location):
    is_initial = deploy.default == value
    return RadioGroupItem(
        value=value,
        label=Div(
            Icon("lucide:server", cls="mb-1 size-5 text-muted-foreground"),
            P(name, cls="text-sm font-semibold"),
            P(location, cls="text-xs text-muted-foreground"),
            data_selected="true" if is_initial else "false",
            data_attr_data_selected=deploy.eq(value).if_("true", "false"),
            cls="flex flex-col items-center rounded-lg border-2 border-border p-4 text-center transition-all hover:bg-accent data-[selected=true]:border-primary data-[selected=true]:ring-2 data-[selected=true]:ring-ring/20",
        ),
    )

Div(
    deploy,
    P("Deploy to", cls="mb-3 text-sm font-medium"),
    RadioGroup(
        RegionCard("us-east", "US East", "Virginia"),
        RegionCard("eu-west", "EU West", "Ireland"),
        RegionCard("ap-south", "Asia Pacific", "Singapore"),
        value="us-east",
        signal=deploy,
        hide_indicators=True,
        cls="grid grid-cols-3 gap-3",
    ),
    P(
        "Region: ",
        Code(data_text=deploy),
        cls="mt-3 text-sm text-muted-foreground"
    ),
    cls="max-w-md"
)

from starhtml import *

plan = Signal("hosting_plan", "starter")

price = match(plan, starter="$9/mo", pro="$29/mo", business="$99/mo")
desc = match(plan, starter="1 project, 1GB storage, community support",
             pro="10 projects, 50GB storage, priority support",
             business="Unlimited projects, 500GB, dedicated support")

Div(
    plan,
    RadioGroup(
        RadioGroupItem(value="starter", label="Starter"),
        RadioGroupItem(value="pro", label="Pro"),
        RadioGroupItem(value="business", label="Business"),
        value="starter",
        signal=plan,
        cls="flex gap-4",
    ),
    Div(
        Span(data_text=price, cls="text-sm font-semibold"),
        Span(" — "),
        Span(data_text=desc, cls="text-sm text-muted-foreground"),
        cls="mt-1",
    ),
    cls="grid w-full max-w-md gap-2",
)