Radio Group

A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.

DefaultComfortableCompact

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn RadioExample() -> impl IntoView {
    view! {
        <RadioGroup default="comfortable" class="w-fit">
            <Radio value="default">"Default"</Radio>
            <Radio value="comfortable">"Comfortable"</Radio>
            <Radio value="compact">"Compact"</Radio>
        </RadioGroup>
    }
}

Description

Default

Standard spacing for most use cases.

Comfortable

More space between elements.

Compact

Minimal spacing for dense layouts.

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn RadioDescriptionExample() -> impl IntoView {
    view! {
        <RadioGroup default="comfortable" class="w-fit">
            <Field orientation="horizontal">
                <Radio value="default" id="desc-r1" />
                <FieldContent>
                    <Label label_for="desc-r1">"Default"</Label>
                    <FieldDescription>"Standard spacing for most use cases."</FieldDescription>
                </FieldContent>
            </Field>
            <Field orientation="horizontal">
                <Radio value="comfortable" id="desc-r2" />
                <FieldContent>
                    <Label label_for="desc-r2">"Comfortable"</Label>
                    <FieldDescription>"More space between elements."</FieldDescription>
                </FieldContent>
            </Field>
            <Field orientation="horizontal">
                <Radio value="compact" id="desc-r3" />
                <FieldContent>
                    <Label label_for="desc-r3">"Compact"</Label>
                    <FieldDescription>"Minimal spacing for dense layouts."</FieldDescription>
                </FieldContent>
            </Field>
        </RadioGroup>
    }
}

Choice Card

Plus

For individuals and small teams.

Pro

For growing businesses.

Enterprise

For large teams and enterprises.

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn RadioChoiceCardExample() -> impl IntoView {
    view! {
        <RadioGroup default="plus" class="max-w-sm">
            <FieldLabel label_for="plus-plan">
                <Field orientation="horizontal">
                    <FieldContent>
                        <FieldTitle>"Plus"</FieldTitle>
                        <FieldDescription>"For individuals and small teams."</FieldDescription>
                    </FieldContent>
                    <Radio value="plus" id="plus-plan" />
                </Field>
            </FieldLabel>
            <FieldLabel label_for="pro-plan">
                <Field orientation="horizontal">
                    <FieldContent>
                        <FieldTitle>"Pro"</FieldTitle>
                        <FieldDescription>"For growing businesses."</FieldDescription>
                    </FieldContent>
                    <Radio value="pro" id="pro-plan" />
                </Field>
            </FieldLabel>
            <FieldLabel label_for="enterprise-plan">
                <Field orientation="horizontal">
                    <FieldContent>
                        <FieldTitle>"Enterprise"</FieldTitle>
                        <FieldDescription>"For large teams and enterprises."</FieldDescription>
                    </FieldContent>
                    <Radio value="enterprise" id="enterprise-plan" />
                </Field>
            </FieldLabel>
        </RadioGroup>
    }
}

Fieldset

Subscription Plan

Yearly and lifetime plans offer significant savings.

Monthly ($9.99/month)

Yearly ($99.99/year)

Lifetime ($299.99)

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn RadioFieldsetExample() -> impl IntoView {
    view! {
        <FieldSet class="w-full max-w-xs">
            <FieldLegend variant="label">"Subscription Plan"</FieldLegend>
            <FieldDescription>
                "Yearly and lifetime plans offer significant savings."
            </FieldDescription>
            <RadioGroup default="monthly">
                <Field orientation="horizontal">
                    <Radio value="monthly" id="plan-monthly" />
                    <Label label_for="plan-monthly" class="font-normal">
                        "Monthly ($9.99/month)"
                    </Label>
                </Field>
                <Field orientation="horizontal">
                    <Radio value="yearly" id="plan-yearly" />
                    <Label label_for="plan-yearly" class="font-normal">
                        "Yearly ($99.99/year)"
                    </Label>
                </Field>
                <Field orientation="horizontal">
                    <Radio value="lifetime" id="plan-lifetime" />
                    <Label label_for="plan-lifetime" class="font-normal">
                        "Lifetime ($299.99)"
                    </Label>
                </Field>
            </RadioGroup>
        </FieldSet>
    }
}

Disabled

Notification Preferences

Choose how you want to receive notifications.

Email only

SMS only

Both Email & SMS

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn RadioDisabledExample() -> impl IntoView {
    view! {
        <FieldSet class="w-full max-w-xs">
            <FieldLegend variant="label">"Notification Preferences"</FieldLegend>
            <FieldDescription>"Choose how you want to receive notifications."</FieldDescription>
            <RadioGroup default="email" disabled=true>
                <Field orientation="horizontal" disabled=true>
                    <Radio value="email">"Email only"</Radio>
                </Field>
                <Field orientation="horizontal">
                    <Radio value="sms" disabled=true>
                        "SMS only"
                    </Radio>
                </Field>
                <Field orientation="horizontal">
                    <Radio value="both">"Both Email & SMS"</Radio>
                </Field>
            </RadioGroup>
        </FieldSet>
    }
}

Invalid

Notification Preferences

Choose how you want to receive notifications.

Email only

SMS only

Both Email & SMS

use leptos::prelude::*;
use singlestage::*;

#[component]
pub fn RadioInvalidExample() -> impl IntoView {
    view! {
        <FieldSet class="w-full max-w-xs">
            <FieldLegend variant="label">"Notification Preferences"</FieldLegend>
            <FieldDescription>"Choose how you want to receive notifications."</FieldDescription>
            <RadioGroup default="email" invalid=true>
                <Field orientation="horizontal" invalid=true>
                    <Radio value="email">"Email only"</Radio>
                </Field>
                <Field orientation="horizontal">
                    <Radio value="sms" invalid=true>
                        "SMS only"
                    </Radio>
                </Field>
                <Field orientation="horizontal">
                    <Radio value="both">"Both Email & SMS"</Radio>
                </Field>
            </RadioGroup>
        </FieldSet>
    }
}

Anatomy

Import all parts and piece them together.

use leptos::prelude::*;
use singlestage::radio::*;

#[component]
pub fn RadioAnatomy() -> impl IntoView {
    view! {
        <RadioGroup>
            <Radio />
        </RadioGroup>
    }
}

API Reference

Radio

An item in the group that can be checked.

Custom Attributes
Name	Type	Default	Description
checked	bool	false	A reactive signal coupled to the radio button's checked value.

Implements global, input, and radio attributes.

RadioGroup

Contains all the parts of a radio group.

Custom Attributes
Name	Type	Default	Description
default	String	""	Set or update the default selected value for the RadioGroup.
invalid	bool	false	A reactive signal that toggles whether all the children Radios appear invalid or not.
value	String	""	A reactive value coupled to the currently selected Radio's value.

Implements global and fieldset attributes.

Getting Started

Components