Radio Group
A set of interactive radio buttons where only one can be selected at a time.
Basic example
Submitting a form using Radio Group
The name prop is used to name the group. It is submitted with its owning form as part of a name/value pair.
When the required prop is True, it indicates that the user must check a radio item before the owning form can be submitted.
Example Form
Results:
{}ExpandCollapse
API Reference
rx.radio_group
High level wrapper for the RadioGroup component.
directionsizevariantcolor_schemehigh_contrastdisabledProps
| Prop | Type | Description |
|---|---|---|
items | Sequence | The items of the radio group. |
direction | "row""column""row-reverse""column-reverse" | The direction of the radio group. |
spacing | "0""1""2""3""4""5""6""7""8""9" | The gap between the items of the radio group. |
size | "1""2""3" | The size of the radio group. |
variant | "classic""surface""soft" | The variant of the radio group. |
color_scheme | "tomato""red""ruby""crimson""pink""plum""purple""violet""iris""indigo""blue""cyan""teal""jade""green""grass""brown""orange""sky""mint""lime""yellow""amber""gold""bronze""gray" | The color of the radio group. |
high_contrast | bool | Whether to render the radio group with higher contrast color against background. |
value | str | The controlled value of the radio item to check. Should be used in conjunction with on_change. |
default_value | str | The initial value of checked radio item. Should be used in conjunction with on_change. |
disabled | bool | Whether the radio group is disabled. |
name | str | The name of the group. Submitted with its owning form as part of a name/value pair. |
required | bool | Whether the radio group is required. |
Event Triggers
See the full list of default event triggersrx.radio_group.root
A set of interactive radio buttons where only one can be selected at a time.
sizevariantcolor_schemehigh_contrastdisabledProps
| Prop | Type | Description |
|---|---|---|
size | "1""2""3" | The size of the radio group: "1" | "2" | "3". |
variant | "classic""surface""soft" | The variant of the radio group. |
color_scheme | "tomato""red""ruby""crimson""pink""plum""purple""violet""iris""indigo""blue""cyan""teal""jade""green""grass""brown""orange""sky""mint""lime""yellow""amber""gold""bronze""gray" | The color of the radio group. |
high_contrast | bool | Whether to render the radio group with higher contrast color against background. |
value | str | The controlled value of the radio item to check. Should be used in conjunction with on_change. |
default_value | str | The initial value of checked radio item. Should be used in conjunction with on_change. |
disabled | bool | Whether the radio group is disabled. |
name | str | The name of the group. Submitted with its owning form as part of a name/value pair. |
required | bool | Whether the radio group is required. |
rx.radio_group.item
An item in the group that can be checked.
disabledProps
| Prop | Type | Description |
|---|---|---|
value | str | The value of the radio item to check. Should be used in conjunction with on_change. |
disabled | bool | When true, prevents the user from interacting with the radio item. |
required | bool | When true, indicates that the user must check the radio item before the owning form can be submitted. |