Radio Group

from starhtml import *
from starui import *

selected_plan = Signal("selected_plan", "free")

def PlanCard(value, name, price, description, features, badge=None):
    is_initial = selected_plan.default == value
    return RadioGroupItem(
        value=value,
        label=Div(
            Div(
                Div(
                    P(name, cls="font-semibold text-base"),
                    Badge(badge, variant="secondary", cls="ml-2") if badge else None,
                    cls="flex items-center"
                ),
                P(price, cls="text-2xl font-bold mt-1"),
                P(description, cls="text-sm text-muted-foreground mt-2"),
                Div(
                    *[P(f"• {feature}", cls="text-sm") for feature in features],
                    cls="mt-3 space-y-1"
                ),
                cls="flex flex-col"
            ),
            data_selected="true" if is_initial else "false",
            data_attr_data_selected=selected_plan.eq(value).if_("true", "false"),
            cls="p-4 border-2 rounded-lg h-full min-h-[220px] w-full transition-all hover:bg-gray-50 dark:hover:bg-gray-800 border-gray-200 dark:border-gray-700 data-[selected=true]:border-blue-500 data-[selected=true]:ring-2 data-[selected=true]:ring-blue-500/20 data-[selected=true]:bg-blue-50 dark:data-[selected=true]:bg-blue-950/20",
        ),
        cls="w-full"
    )

Card(
    CardHeader(
        CardTitle("Choose Your Plan"),
        CardDescription("Select the plan that best fits your needs")
    ),
    CardContent(
        Form(
            selected_plan,
            P("Subscription Plans", cls="text-sm font-medium mb-4"),
            RadioGroup(
                PlanCard(
                    "free",
                    "Free",
                    "$0/month",
                    "Perfect for trying out our service",
                    ["10 projects", "Basic support", "1GB storage"],
                    badge="Most Popular"
                ),
                PlanCard(
                    "pro",
                    "Professional",
                    "$29/month",
                    "For professional developers",
                    ["Unlimited projects", "Priority support", "100GB storage", "Advanced features"]
                ),
                PlanCard(
                    "enterprise",
                    "Enterprise",
                    "Custom pricing",
                    "For large teams and organizations",
                    ["Everything in Pro", "Dedicated support", "Unlimited storage", "Custom integrations", "SLA guarantee"]
                ),
                value="free",
                signal=selected_plan,
                hide_indicators=True,
                cls="grid grid-cols-1 gap-3 w-full"
            ),
            P(
                "Selected plan: ",
                Code(data_text=selected_plan, cls="ml-2"),
                cls="text-sm text-muted-foreground mt-4"
            ),
            Button(
                data_text=selected_plan.eq("enterprise").if_("Contact Sales", "Get Started"),
                data_on_click=js("alert(`Selected plan: ${$selected_plan}`)"),
                cls="w-full mt-4"
            )
        )
    ),
    cls="max-w-2xl"
)

from starhtml import *
from starui import *

payment_method = Signal("payment_method", "card")

def PaymentInfo(method, icon):
    return Div(
        Icon(icon, cls="h-5 w-5 mr-2"),
        P("Secure payment processing", cls="text-sm"),
        data_show=payment_method.eq(method),
        cls="flex items-center p-3 bg-muted rounded-md w-full"
    )

Card(
    CardHeader(
        CardTitle("Payment Method"),
        CardDescription("How would you like to pay?")
    ),
    CardContent(
        Form(
            payment_method,
            RadioGroupWithLabel(
                label="Select payment method",
                options=[
                    {"value": "card", "label": "Credit/Debit Card"},
                    {"value": "paypal", "label": "PayPal"},
                    {"value": "bank", "label": "Bank Transfer"},
                    {"value": "crypto", "label": "Cryptocurrency"}
                ],
                value="card",
                signal=payment_method,
                required=True
            ),
            Div(
                PaymentInfo("card", "lucide:credit-card"),
                PaymentInfo("paypal", "lucide:wallet"),
                PaymentInfo("bank", "lucide:building-2"),
                PaymentInfo("crypto", "lucide:bitcoin"),
                cls="mt-4 h-16 flex items-center"
            ),
            Button(
                "Continue to Payment",
                data_on_click=(js("alert(`Proceeding with ${$payment_method}`)"), dict(prevent=True)),
                type="submit",
                cls="w-full mt-4"
            )
        )
    ),
    cls="max-w-lg"
)

from starhtml import *
from starui import *

step = Signal("step", 0)

# Data-driven: define questions once
questions = [
    {
        "signal_name": "survey_q1",
        "label": "What is your primary programming language?",
        "options": [
            {"value": "javascript", "label": "JavaScript/TypeScript"},
            {"value": "python", "label": "Python"},
            {"value": "java", "label": "Java"},
            {"value": "csharp", "label": "C#"},
            {"value": "go", "label": "Go"},
            {"value": "rust", "label": "Rust"},
            {"value": "other", "label": "Other"}
        ]
    },
    {
        "signal_name": "survey_q2",
        "label": "How many years of development experience do you have?",
        "options": [
            {"value": "0-1", "label": "Less than 1 year"},
            {"value": "1-3", "label": "1-3 years"},
            {"value": "3-5", "label": "3-5 years"},
            {"value": "5-10", "label": "5-10 years"},
            {"value": "10+", "label": "More than 10 years"}
        ]
    },
    {
        "signal_name": "survey_q3",
        "label": "Which frontend framework do you prefer?",
        "options": [
            {"value": "react", "label": "React"},
            {"value": "vue", "label": "Vue.js"},
            {"value": "angular", "label": "Angular"},
            {"value": "svelte", "label": "Svelte"},
            {"value": "datastar", "label": "Datastar"},
            {"value": "vanilla", "label": "Vanilla JS"},
            {"value": "none", "label": "I'm a backend developer"}
        ]
    }
]

# Create signals from questions data
signals = {q["signal_name"]: Signal(q["signal_name"], "") for q in questions}

# Compute answered count from signals
answered_count = Signal("answered_count", sum(signals[q["signal_name"]] != "" for q in questions))
total_questions = len(questions)
at_end = step == total_questions - 1

Card(
    CardHeader(
        CardTitle(data_text="Question " + (step + 1) + " of " + total_questions),
        CardDescription("Web Development Survey")
    ),
    CardContent(
        Div(
            step,
            *signals.values(),
            answered_count,
            Div(
                P(
                    data_text="Question " + (step + 1) + " of " + total_questions,
                    cls="text-xs text-muted-foreground mb-2"
                ),
                Div(
                    Div(
                        data_style_width=(answered_count / total_questions * 100) + "%",
                        cls="h-2 bg-primary rounded-full transition-all duration-300"
                    ),
                    cls="w-full bg-secondary rounded-full h-2 mb-6"
                ),
                cls="mb-4"
            ),
            Div(
                *[Div(
                    RadioGroupWithLabel(
                        label=q["label"],
                        options=q["options"],
                        signal=signals[q["signal_name"]],
                        required=True
                    ),
                    data_show=step.eq(i)
                ) for i, q in enumerate(questions)],
            ),
            Div(
                Button(
                    "Previous",
                    data_on_click=(step > 0).then(step.sub(1)),
                    data_show=step > 0,
                    variant="outline",
                ),
                Button(
                    data_text=at_end.if_("Complete", "Next"),
                    data_on_click=[
                        at_end.then(seq(
                            step.set(0),
                            *[signals[q["signal_name"]].set("") for q in questions]
                        )),
                        (~at_end).then(step.add(1)),
                    ],
                    variant="default"
                ),
                cls="flex justify-between mt-6"
            )
        )
    ),
    cls="w-full max-w-lg"
)

from starhtml import *
from starui import *

Card(
    CardHeader(
        CardTitle("Display Settings"),
        CardDescription("Customize your viewing experience")
    ),
    CardContent(
        Div(
            (theme_setting := Signal("theme_setting", "system")),
            (font_setting := Signal("font_setting", "medium")),
            (language_setting := Signal("language_setting", "en")),
            RadioGroupWithLabel(
                label="Theme",
                options=[
                    {"value": "light", "label": "Light"},
                    {"value": "dark", "label": "Dark"},
                    {"value": "system", "label": "System"}
                ],
                value="system",
                signal=theme_setting,
                helper_text="Choose your preferred color scheme"
            ),
            Separator(cls="my-4"),
            RadioGroupWithLabel(
                label="Font Size",
                options=[
                    {"value": "small", "label": "Small (14px)"},
                    {"value": "medium", "label": "Medium (16px)"},
                    {"value": "large", "label": "Large (18px)"}
                ],
                value="medium",
                signal=font_setting,
                helper_text="Adjust text size for better readability"
            ),
            Separator(cls="my-4"),
            RadioGroupWithLabel(
                label="Language",
                options=[
                    {"value": "en", "label": "English"},
                    {"value": "es", "label": "Español"},
                    {"value": "fr", "label": "Français"},
                    {"value": "de", "label": "Deutsch"},
                    {"value": "ja", "label": "日本語"}
                ],
                value="en",
                signal=language_setting
            ),
            Button(
                "Apply Settings",
                data_on_click=js("alert('Settings applied!\\nTheme: ' + $theme_setting + '\\nFont: ' + $font_setting + '\\nLanguage: ' + $language_setting)"),
                cls="w-full mt-6"
            )
        )
    ),
    cls="max-w-lg"
)