leptos-shadcn-ui/docs/components/api/radio-group.md

Radio Group Component API

A set of radio buttons for single selection from multiple options.

---

Installation

# Cargo.toml
[dependencies]
shadcn-ui-leptos-radio-group = "0.7"

use shadcn_ui_leptos_radio_group::RadioGroup;

---

Import

use shadcn_ui_leptos_radio_group::{
    RadioGroup,
    RadioGroupItem
};

---

Component API

RadioGroup

Root container managing radio state.

Prop	Type	Default	Description
value	Signal<String>	Required	Selected value
on_change	Option<Callback<String>>	None	Change handler
disabled	Signal<bool>	false	Disable group
name	MaybeProp<String>	None	Form field name

RadioGroupItem

Individual radio option.

Prop	Type	Default	Description
value	String	Required	Option value
disabled	Signal<bool>	false	Disable option
id	MaybeProp<String>	None	Unique identifier

---

Usage Examples

Basic Radio Group

use leptos::prelude::*;
use shadcn_ui_leptos_radio_group::*;

#[component]
pub fn MyComponent() -> impl IntoView {
    let (selected, set_selected) = signal("default".to_string());

    view! {
        <RadioGroup
            value=selected.into()
            on_change=Some(Callback::new(move |v| set_selected.set(v)))
            name="notification"
        >
            <div class="flex items-center space-x-2">
                <RadioGroupItem value="default" id="r1" />
                <label for="r1">"Default"</label>
            </div>
            <div class="flex items-center space-x-2">
                <RadioGroupItem value="compact" id="r2" />
                <label for="r2">"Compact"</label>
            </div>
        </RadioGroup>
    }
}

---

CSS Classes

.radio-group-item {
    aspect-square h-4 w-4 rounded-full border
    border-primary text-primary ring-offset-background
    focus:outline-none focus:ring-2 focus:ring-ring
    focus:ring-offset-2 disabled:cursor-not-allowed
    disabled:opacity-50
}

.radio-group-item[data-state=checked] {
    border-primary text-primary
}

---

Accessibility

Keyboard Navigation

Key	Action
Arrow Keys	Navigate options
Space	Select option

---

TypeScript API

interface RadioGroupProps {
  value: string;
  onChange?: (value: string) => void;
  disabled?: boolean;
  name?: string;
  children?: React.ReactNode;
}

interface RadioGroupItemProps {
  value: string;
  disabled?: boolean;
  id?: string;
}

export const RadioGroup: React.FC<RadioGroupProps>;
export const RadioGroupItem: React.FC<RadioGroupItemProps>;

---

Source: packages/leptos/radio-group/src/default.rs