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::{radio::*, Label};

#[component]
pub fn RadioExample() -> impl IntoView {
    view! {
        <RadioGroup default="default">
            <Label>
                <Radio value="default" />
                "Default"
            </Label>

            // Radios can create their own labels identical to the code above if provided children.
            <Radio value="comfortable">"Comfortable"</Radio>
            <Radio value="compact">"Compact"</Radio>
        </RadioGroup>
    }
}

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	Reactive<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	Reactive<String>	""	A reactive value coupled to the currently selected Radio's value.

Implements global and fieldset attributes.