RadioButton

An input where one option in a group can be selected.

When To Use It

Use RadioButton when users must choose exactly one option from a small set, such as quality presets, themes, or sort modes.

Constructing a RadioButton

A RadioButton binds to a bool checked state and triggers on_select when pressed:

let is_selected = Signal::new(false);

RadioButton::new(cx, is_selected)
	.on_select(|cx| cx.emit(AppEvent::SelectOption));

Typical grouped layout:

VStack::new(cx, |cx| {
	HStack::new(cx, |cx| {
		RadioButton::new(cx, mode.map(|m| *m == Mode::Low))
			.on_select(|cx| cx.emit(AppEvent::SetMode(Mode::Low)));
		Label::new(cx, "Low");
	});

	HStack::new(cx, |cx| {
		RadioButton::new(cx, mode.map(|m| *m == Mode::High))
			.on_select(|cx| cx.emit(AppEvent::SetMode(Mode::High)));
		Label::new(cx, "High");
	});
});

RadioButton Modifiers

Components and Styling

RadioButton uses a root radiobutton element with an inner dot.

Accessibility

RadioButton sets role RadioButton, is checkable, and is keyboard navigable.

Keyboard interaction: