Radio Group

A set of checkable buttons where no more than one can be checked at a time. Composed of RadioGroup and RadioGroupItem.

When to use

• Selecting a single option from a mutually exclusive set.
• Choosing between a small number of alternatives.

API

RadioGroup::new()

A container for radio items. Add items with .child(...).

Method	Type	Description
.child(child)	impl IntoElement	Append a RadioGroupItem

RadioGroupItem::new(id)

An individual radio button.

Method	Type	Default	Description
.label(text)	impl Into<SharedString>	—	Text label
.checked(checked)	bool	false	Whether this item is selected
.focus_handle(&handle)	&FocusHandle	—	Focus handle (enables keyboard activation with Space/Enter)
.on_click(fn)	Fn(&ClickEvent, &mut Window, &mut App)	—	Click handler

Usage

use gpui::{Component, div, prelude::*};
use components::{RadioGroup, RadioGroupItem};

div().child(Component::new(
    RadioGroup::new()
        .child(Component::new(
            RadioGroupItem::new("light-mode")
                .label("Light")
                .checked(this.theme == "light")
                .on_click(cx.listener(|this, _, _, cx| {
                    this.theme = "light".to_string();
                    cx.notify();
                })),
        )),
))

Copy the source

crates/components/src/radio_group.rs — self-contained, stateless, and free to modify.