RadioGroup

The RadioGroup component is used to group Radio components, providing a way for users to select a single option from a set of choices.

---

Python Dash Example

Below is an example of how to use the RadioGroup component in a Python Dash application.

import dash
from dash import html, callback, Output, Input
import yipit_dash_mui_components as dmc

dash._dash_renderer._set_react_version('18.2.0')

app = dash.Dash(__name__)

app.layout = dmc.YipitMUIProvider(
  children=[
    html.Div([
      dmc.RadioGroup(
        id="radio-group-example",
        label="Select an option",
        value="option1",
        children=[
          dmc.Radio(label="Option 1", value="option1"),
          dmc.Radio(label="Option 2", value="option2"),
          dmc.Radio(label="Option 3", value="option3"),
        ]
      ),
      html.Div(id="output")
    ])
  ]
)

@callback(
    Output("output", "children"),
    Input("radio-group-example", "value")
)
def update_output(value):
    return f"Selected option: {value}"

if __name__ == "__main__":
    app.run_server(debug=True)

---

Props Table

Below are the props for the RadioGroup component:

Prop	Type	Default	Description
id	string	None	Unique identifier for the radio group.
defaultValue	any	None	The default value of the radio group when uncontrolled.
name	string	None	Name attribute applied to all radio buttons.
value	any	None	The value of the selected radio button in the group.
row	boolean	false	If true, the radio buttons will be arranged horizontally.
sx	object	None	The system prop that allows defining custom styles.
formControlSx	object	None	The system prop for styling the FormControl wrapper.
label	string	None	The label content for the radio group.
labelSx	object	None	The system prop for styling the label.
children	node	None	The content of the component, normally Radio components.

---

RadioGroup with Row Layout

You can display radio buttons horizontally by setting the row prop to true:

dmc.RadioGroup(
  label="Select an option",
  value="option1",
  row=True,
  children=[
    dmc.Radio(label="Option 1", value="option1"),
    dmc.Radio(label="Option 2", value="option2"),
    dmc.Radio(label="Option 3", value="option3"),
  ]
)

---

For the full list of props, refer to the official MUI documentation, as this component is based on MUI:

MUI RadioGroup Documentation