Skip to main content
Radio buttons let users select exactly one option from a set. Each Radio represents a single choice; wrap them in a RadioGroup to link them together and track the selected value.

​
Basic Usage

A RadioGroup is a container that holds Radio children. Each radio needs an option (what gets stored when selected) and a label (what the user sees). The group tracks which radio is selected and stores its option string in state:

​
Pre-selected Option

Set value=True on a radio to have it selected when the component first renders:

​
Disabled Options

Individual radios can be disabled while the rest of the group remains interactive. This is useful for options that exist but aren’t currently available:

​
Reading the Value

Use .rx on the RadioGroup to get a reactive reference to the selected radio’s option string. When the user clicks a different option, anything bound to .rx updates automatically: Click a radio and the text updates instantly. The .rx reference holds the option string — "heart-of-gold", "bistromath", etc. — not the label.

​
Actions

The on_change parameter on RadioGroup fires actions when the selection changes. Inside the action, $event holds the newly selected option string: For simple “show the current selection” cases, .rx is the better approach. Use on_change when you need to transform the value or trigger side effects.

​
API Reference

RadioGroup Parameters

​
name
str | None
default:"None"
State key for the selected value. Auto-generated if not provided.
​
on_change
Action | list[Action] | None
default:"None"
Action(s) to execute when the selection changes. $event is the value string of the selected radio.
​
css_class
str | None
default:"None"
Additional Tailwind CSS classes.

Radio Parameters

​
option
str
required
The option identifier stored in the group’s state when this radio is selected. Defaults to the label.
​
label
str | None
default:"None"
Label text displayed next to the radio button.
​
value
bool
default:"False"
Whether this radio is initially selected.
​
disabled
bool
default:"False"
Whether this radio is non-interactive.
​
required
bool
default:"False"
Whether a selection is required for form submission.
​
css_class
str | None
default:"None"
Additional Tailwind CSS classes.

​
Protocol Reference

RadioGroup
{
  "type": "RadioGroup",
  "children?": "[Component]",
  "let?": "object",
  "name?": "string",
  "onChange?": "Action | Action[]",
  "cssClass?": "string"
}
Radio
{
  "type": "RadioGroup",
  "children?": "[Component]",
  "let?": "object",
  "name?": "string",
  "onChange?": "Action | Action[]",
  "cssClass?": "string"
}
For the complete protocol schema, see RadioGroup, Radio.