Radio

The Radio component provides users with a selectable option, typically used within a RadioGroup to allow selecting one option from multiple choices.

---

Python Dash Example

Below is an example of how to use the Radio 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",
        row=True,
        children=[
          dmc.Radio(label="Option 1", value="option1", color="primary"),
          dmc.Radio(label="Option 2", value="option2", color="secondary"),
          dmc.Radio(label="Option 3", value="option3", color="success"),
        ]
      ),
      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 Radio component:

Prop	Type	Default	Description
id	string	None	Unique identifier for the radio button.
checked	boolean	None	If true, the radio is selected.
disabled	boolean	false	If true, the radio will be disabled.
disableRipple	boolean	false	If true, the ripple effect will be disabled.
value	any	None	The value of the radio button, used by RadioGroup.
name	string	None	Name attribute of the radio button.
required	boolean	false	If true, the radio button will be required.
color	'primary' | 'secondary' | 'default' | 'error' | 'info' | 'success' | 'warning'	'primary'	The color of the component.
size	'small' | 'medium'	'medium'	The size of the component.
sx	object	None	The system prop that allows defining custom styles.
label	string	None	The label content.
labelSx	object	None	The system prop that allows defining custom styles for label.
ariaLabel	string	None	Aria label for the radio button.
ariaLabelledby	string	None	Aria labelledby for the radio button.

---

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

MUI Radio Button Documentation