Skip to main content
Radio buttons let users select exactly one option from a set of choices.

​
Basic Usage

​
Without RadioGroup

Individual radio buttons can be used independently:

​
Disabled State

​
API Reference

RadioGroup Parameters

​
name
str | None
default:"None"
Form field name shared by all radio buttons in the group.
​
css_class
str | None
default:"None"
Additional Tailwind CSS classes appended to the component’s built-in styles.

Radio Parameters

​
value
str
required
Form value for this option.
​
label
str | None
default:"None"
Label text displayed next to the radio button.
​
checked
bool
default:"False"
Whether this radio button is initially selected.
​
name
str | None
default:"None"
Form field name. Usually inherited from RadioGroup.
​
disabled
bool
default:"False"
Whether the radio button 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]",
  "name?": "string",
  "onChange?": "Action | Action[]",
  "cssClass?": "string"
}
Radio
{
  "type": "RadioGroup",
  "children?": "[Component]",
  "name?": "string",
  "onChange?": "Action | Action[]",
  "cssClass?": "string"
}
For the complete protocol schema, see RadioGroup, Radio.