leptos-shadcn-radio-group

Crates.ioleptos-shadcn-radio-group
lib.rsleptos-shadcn-radio-group
version0.9.0
created_at2025-09-02 15:09:19.322418+00
updated_at2025-09-20 14:11:26.620356+00
descriptionLeptos port of shadcn/ui Radio Group.
homepagehttps://shadcn-ui.rustforweb.org/components/radio-group.html
repositoryhttps://github.com/cloud-shuttle/leptos-shadcn-ui
max_upload_size
id1821257
size127,769
Peter Hanssens (petehanssens)

documentation

README

shadcn-ui-leptos-radio-group

Leptos port of shadcn/ui 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.

Installation

Add this to your Cargo.toml:

[dependencies]
shadcn-ui-leptos-radio-group = { git = "https://github.com/shadcn-ui/shadcn-ui-rust" }

Usage

use leptos::prelude::*;
use shadcn_ui_leptos_radio_group::{RadioGroup, RadioGroupItem};

#[component]
pub fn MyComponent() -> impl IntoView {
    let (selected_value, set_selected_value) = create_signal(None::<String>);
    
    let on_value_change = Callback::from(move |value: String| {
        set_selected_value.set(Some(value));
    });
    
    view! {
        <RadioGroup
            value=selected_value
            on_value_change=on_value_change
        >
            <RadioGroupItem value="option1".to_string()>
                "Option 1"
            </RadioGroupItem>
            <RadioGroupItem value="option2".to_string()>
                "Option 2"
            </RadioGroupItem>
            <RadioGroupItem value="option3".to_string()>
                "Option 3"
            </RadioGroupItem>
        </RadioGroup>
    }
}

Variants

Default

The default styling variant.

use shadcn_ui_leptos_radio_group::{RadioGroup, RadioGroupItem};

New York

A variant with subtle styling differences.

use shadcn_ui_leptos_radio_group::{RadioGroupNewYork as RadioGroup, RadioGroupItemNewYork as RadioGroupItem};

Props

RadioGroup

Prop Type Default Description
value MaybeProp<String> None Currently selected value
on_value_change Option<Callback<String>> None Callback when value changes
disabled Signal<bool> false Whether the radio group is disabled
class MaybeProp<String> None Additional CSS classes
id MaybeProp<String> None HTML id attribute
style Signal<Style> Style::default() Inline styles

RadioGroupItem

Prop Type Default Description
value String Required The value of this radio item
disabled Signal<bool> false Whether this item is disabled
class MaybeProp<String> None Additional CSS classes
id MaybeProp<String> None HTML id attribute
style Signal<Style> Style::default() Inline styles

Accessibility

The component follows ARIA guidelines for radio groups:

  • Uses role="radiogroup" on the container
  • Uses role="radio" on each item
  • Provides aria-checked attribute
  • Includes proper focus management
  • Supports keyboard navigation

License

MIT

Commit count: 209

cargo fmt