## RadioGroup  
RadioGroup component gives user radio inputs to allow only one selection from a small set of options.  
Category: Inputs  

### Simple Usage

Use the `value` prop for callbacks.

```python
import dash_mantine_components as dmc
from dash import html, Output, Input, callback

data = [["react", "React"], ["ng", "Angular"], ["svelte", "Svelte"], ["vue", "Vue"]]

component = html.Div(
    [
        dmc.RadioGroup(
            children=dmc.Group([dmc.Radio(l, value=k) for k, l in data], my=10),
            id="radiogroup-simple",
            value="react",
            label="Select your favorite framework/library",
            size="sm",
            mb=10,
        ),
        dmc.Text(id="radio-output"),
    ]
)


@callback(Output("radio-output", "children"), Input("radiogroup-simple", "value"))
def choose_framework(value):
    return value
```
### Customizing Radio

Each Radio item in a RadioGroup can be customized. The Radio component is a wrapper for input type radio.  Use Stack or Group to arrange multiple Radio items

### Color

In a RadioGroup component, the color property can be customized at the individual Radio level.

```python
import dash_mantine_components as dmc

data = [
    ["react", "React", "blue"],
    ["ng", "Angular", "orange"],
    ["svelte", "Svelte", "red"],
    ["dash", "Dash", "green"],
]

component = dmc.RadioGroup(
    children=dmc.Stack([dmc.Radio(l, value=k, color=c) for k, l, c in data]),
    value="ng",
    size="sm",
)
```
### Size

You can set the size of all the Radio items by using the `size` prop in the RadioGroup component.  Use one of xs, sm, md, lg and xl.

```python
import dash_mantine_components as dmc
from dash import html

component = html.Div(
    [
        dmc.RadioGroup(
            children=dmc.Group(
                [dmc.Radio(i, value=i) for i in ["USA", "Canada", "France"]], my=10
            ),
            value="USA",
            label="Size Example - small",
            size="sm",
            mt=10,
        ),
        dmc.RadioGroup(
            children=dmc.Group(
                [dmc.Radio(i, value=i) for i in ["USA", "Canada", "France"]], my=10
            ),
            value="USA",
            label="Size Example - large",
            size="lg",
            mt=30,
        ),
    ]
)
```
### Group or Stack

In a RadioGroup component, the Radio items can be arranged by using the Group or Stack components.

```python
import dash_mantine_components as dmc
from dash import html

data = [["react", "React"], ["ng", "Angular"], ["svelte", "Svelte"], ["vue", "Vue"]]

component = html.Div(
    [
        dmc.RadioGroup(
            children=dmc.Group([dmc.Radio(l, value=k) for k, l in data], my=10),
            value="react",
            label="Select your favorite framework/library",
            size="sm",
            my=10,
        ),
        dmc.RadioGroup(
            children=dmc.Stack([dmc.Radio(l, value=k) for k, l in data], my=10),
            value="react",
            label="Select your favorite framework/library",
            size="sm",
            mt=10,
        ),
    ]
)
```
### Deselectable RadioGroup

To enable deselecting a radio chip, set `deselectable=True`

```python
import dash_mantine_components as dmc
from dash import html

data = [["react", "React"], ["ng", "Angular"], ["svelte", "Svelte"], ["vue", "Vue"]]

component = html.Div(
    [
        dmc.RadioGroup(
            children=dmc.Group([dmc.Radio(l, value=k) for k, l in data], my=10),
            value="react",
            label="Select your favorite framework/library",
            size="sm",
            my=10,
            deselectable=True
        ),

    ]
)
```
### RadioIndicator component

`RadioIndicator` looks exactly the same as `Radio` component, but it does not have any semantic meaning, it's just a 
visual representation of radio state. You can use it in any place where you need to display radio state without any 
interaction related to the indicator. For example, it is useful in cards based on buttons, trees, etc.

> Note that `RadioIndicator` cannot be focused or selected with keyboard. It is not accessible and should not be used as
a replacement for Radio component.

```python
import dash_mantine_components as dmc

component = dmc.Group([
    dmc.RadioIndicator(),
    dmc.RadioIndicator(checked=True),
    dmc.RadioIndicator(disabled=True),
    dmc.RadioIndicator(disabled=True, checked=True)
])
```
### RadioCard component

RadioCard component can be used as a replacement for `Radio` to build custom cards/buttons/other things that work as
radios. The root element of the component has `role="radio"` attribute, it is accessible by default and supports the
same keyboard interactions as `input[type="radio"]`.


```python
import dash_mantine_components as dmc


component = dmc.RadioCard(
    withBorder=True,
    p="md",
    checked=True,
    children=[
        dmc.Center([
            dmc.RadioIndicator(),
            dmc.Text("RadioCard", size="xl", pl="sm"),
        ], inline=True),
    ]
)
```
### RadioCard with RadioGroup

You can use `RadioCard` with `RadioGroup` the same way as `Radio` component.

Note - do not set the `checked` prop in the `RadioIndicator` component otherwise the `RadioIndicator` will not be updated.
This example also shows how to add hover styles

```python

from dash import  Input, Output, callback
import dash_mantine_components as dmc

def make_radiocard(label, description):
    return dmc.RadioCard(
        withBorder=True,
        p="md",
        mt="md",
        className="checkboxcard-root",
        value=label,
        children=[
            dmc.Group([
                dmc.RadioIndicator(),
                dmc.Box([
                    dmc.Text(label, lh="1.3", fz="md", fw="bold" ),
                    dmc.Text(description, size="sm", c="dimmed"),
                ])
            ], wrap="nowrap", align="flex-start"),
        ]
    )


component = dmc.Box([
    dmc.RadioGroup(
        id="radiocard-group",
        label= "RadioGroup label",
        value="RadioCard 1",
        description="This is a RadioGroup description",
        deselectable=True,
        children=[
            make_radiocard(f"RadioCard {i}", f"RadioCard description {i}")
            for i in range(1, 5)
        ]
    ),
    dmc.Box(id="radio-group-out"),
])


@callback(
    Output("radiocard-group-out", "children"),
    Input("radiocard-group", "value")
)
def update(checked):
   return f"Selected: {checked}"
```

```css
/* used for both CheckboxCard and RadioCard*/
.checkboxcard-root {
    position: relative;
    padding: var(--mantine-spacing-md);
    transition: border-color 150ms ease;

    &[data-checked] {
        border-color: var(--mantine-primary-color-filled);
    }
}

.checkboxcard-root:hover {
    background-color: light-dark(
            var(--mantine-color-gray-0),
            var(--mantine-color-dark-6)
    );
}
```



### Styles API



This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.


#### Radio Selectors

| Selector       | Static selector              | Description                           |
|---------------|------------------------------|---------------------------------------|
| root          | .mantine-Radio-root          | Root element                         |
| radio         | .mantine-Radio-radio         | Input element (input[type="radio"])  |
| icon          | .mantine-Radio-icon          | Radio icon, used to display checked icon |
| inner         | .mantine-Radio-inner         | Wrapper for icon and input           |
| body          | .mantine-Radio-body          | Input body, contains all other elements |
| labelWrapper  | .mantine-Radio-labelWrapper  | Contains label, description, and error |
| label         | .mantine-Radio-label         | Label element                        |
| description   | .mantine-Radio-description   | Description displayed below the label |
| error         | .mantine-Radio-error         | Error message displayed below the label |

#### Radio CSS Variables

| Selector | Variable           | Description                                |
|----------|-------------------|--------------------------------------------|
| root     | --radio-color     | Controls checked radio background-color   |
|          | --radio-radius    | Controls radio border-radius              |
|          | --radio-size      | Controls radio width and height           |
|          | --radio-icon-color | Controls radio icon color                 |
|          | --radio-icon-size  | Controls radio icon width and height      |

#### Radio Data Attributes

| Selector | Attribute           | Condition         | Value |
|----------|--------------------|------------------|-------|
| radio    | data-error         | `error` prop is set | –     |
| inner    | data-label-position | –                | Value of `labelPosition` prop |

#### RadioGroup Selectors

| Selector    | Static selector               | Description                         |
|------------|------------------------------|-------------------------------------|
| root       | .mantine-RadioGroup-root     | Root element                       |
| label      | .mantine-RadioGroup-label    | Label element                      |
| required   | .mantine-RadioGroup-required | Required asterisk element, rendered inside label |
| description | .mantine-RadioGroup-description | Description element                |
| error      | .mantine-RadioGroup-error    | Error element                      |

#### RadioIndicator Selectors

| Selector   | Static selector                   | Description   |
|------------|----------------------------------|---------------|
| indicator  | .mantine-RadioIndicator-indicator | Root element  |
| icon       | .mantine-RadioIndicator-icon     | Radio icon    |

#### RadioIndicator CSS Variables

| Selector   | Variable           | Description                                |
|------------|-------------------|--------------------------------------------|
| indicator  | --radio-color     | Controls checked radio background-color   |
|            | --radio-radius    | Controls radio border-radius              |
|            | --radio-size      | Controls radio width and height           |
|            | --radio-icon-color | Controls radio icon color                 |
|            | --radio-icon-size  | Controls radio icon width and height      |

#### RadioIndicator Data Attributes

| Selector   | Attribute     | Condition         |
|------------|-------------|------------------|
| indicator  | data-checked | `checked` prop is set |
| indicator  | data-disabled | `disabled` prop is set |

#### RadioCard Selectors

| Selector | Static selector          | Description   |
|----------|--------------------------|---------------|
| card     | .mantine-RadioCard-card  | Root element  |

#### RadioCard CSS Variables

| Selector | Variable      | Description                  |
|----------|-------------|------------------------------|
| card     | --card-radius | Controls card border-radius |

#### RadioCard Data Attributes

| Selector | Attribute       | Condition                  |
|----------|----------------|----------------------------|
| card     | data-checked    | `checked` prop is set      |
| card     | data-with-border | `withBorder` prop is set  |


### Keyword Arguments
#### RadioGroup

- children (a list of or a singular dash component, string or number; required):
    `Radio` components and any other elements.

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- aria-* (string; optional):
    Wild card aria attributes.

- attributes (boolean | number | string | dict | list; optional):
    Passes attributes to inner elements of a component.  See Styles
    API docs.

- className (string; optional):
    Class added to the root element, if applicable.

- classNames (dict; optional):
    Adds custom CSS class names to inner elements of a component.  See
    Styles API docs.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- description (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Description` component. If not set, description
    is not rendered.

- descriptionProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Description` component.

- deselectable (boolean; optional):
    Allow to deselect Chip in Radio mode.

- error (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Error` component. If not set, error is not
    rendered.

- errorProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Error` component.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- inputWrapperOrder (list of a value equal to: 'label', 'input', 'description', 'error's; optional):
    Controls order of the elements, `['label', 'description', 'input',
    'error']` by default.

- label (a list of or a singular dash component, string or number; optional):
    Contents of `Input.Label` component. If not set, label is not
    rendered.

- labelElement (a value equal to: 'label', 'div'; optional):
    `Input.Label` root element, `'label'` by default.

- labelProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Label` component.

- lightHidden (boolean; optional):
    Determines whether component should be hidden in light color
    scheme with `display: none`.

- loading_state (dict; optional):
    Object that holds the loading state object coming from
    dash-renderer. For use with dash<3.

    `loading_state` is a dict with keys:

- mod (string | dict | list of string | dicts; optional):
    Element modifiers transformed into `data-` attributes. For
    example: "xl" or {"data-size": "xl"}. Can also be a list of
    strings or dicts for multiple modifiers. Falsy values are removed.

- name (string; optional):
    `name` attribute of child radio inputs. By default, `name` is
    generated randomly.

- persisted_props (list of strings; optional):
    Properties whose user interactions will persist after refreshing
    the component or the page. Since only `value` is allowed this prop
    can normally be ignored.

- persistence (string | number | boolean; optional):
    Used to allow user interactions in this component to be persisted
    when the component - or the page - is refreshed. If `persisted` is
    truthy and hasn't changed from its previous value, a `value` that
    the user has changed while using the app will keep that change, as
    long as the new `value` also matches what was given originally.
    Used in conjunction with `persistence_type`. Note:  The component
    must have an `id` for persistence to work.

- persistence_type (a value equal to: 'local', 'session', 'memory'; optional):
    Where persisted user changes will be stored: memory: only kept in
    memory, reset on page refresh. local: window.localStorage, data is
    kept after the browser quit. session: window.sessionStorage, data
    is cleared once the browser quit.

- readOnly (boolean; optional):
    If set, value cannot be changed.

- required (boolean; optional):
    Adds required attribute to the input and a red asterisk on the
    right side of label, `False` by default.

- size (a value equal to: 'xs', 'sm', 'md', 'lg', 'xl'; optional):
    Controls size of the `Input.Wrapper`, `'sm'` by default.

- styles (boolean | number | string | dict | list; optional):
    Adds inline styles directly to inner elements of a component.  See
    Styles API docs.

- tabIndex (number; optional):
    tab-index.

- value (string; optional):
    Controlled component value.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.

- withAsterisk (boolean; optional):
    Determines whether the required asterisk should be displayed.
    Overrides `required` prop. Does not add required attribute to the
    input. `False` by default.

- wrapperProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the `Input.Wrapper`.
#### Radio

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- aria-* (string; optional):
    Wild card aria attributes.

- attributes (boolean | number | string | dict | list; optional):
    Passes attributes to inner elements of a component.  See Styles
    API docs.

- autoContrast (boolean; optional):
    Determines whether icon color with filled variant should depend on
    `background-color`. If luminosity of the `color` prop is less than
    `theme.luminosityThreshold`, then `theme.white` will be used for
    text color, otherwise `theme.black`. Overrides
    `theme.autoContrast`.

- className (string; optional):
    Class added to the root element, if applicable.

- classNames (dict; optional):
    Adds custom CSS class names to inner elements of a component.  See
    Styles API docs.

- color (optional):
    Key of `theme.colors` or any valid CSS color to set input color in
    checked state, `theme.primaryColor` by default.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- description (a list of or a singular dash component, string or number; optional):
    Description displayed below the label.

- disabled (boolean; optional):
    Determines whether Radio disabled and non-selectable.

- error (a list of or a singular dash component, string or number; optional):
    Error displayed below the label.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- iconColor (optional):
    Key of `theme.colors` or any valid CSS color to set icon color, by
    default value depends on `theme.autoContrast`.

- label (a list of or a singular dash component, string or number; optional):
    Content of the `label` associated with the radio.

- labelPosition (a value equal to: 'left', 'right'; optional):
    Position of the label relative to the input, `'right'` by default.

- lightHidden (boolean; optional):
    Determines whether component should be hidden in light color
    scheme with `display: none`.

- loading_state (dict; optional):
    Object that holds the loading state object coming from
    dash-renderer. For use with dash<3.

    `loading_state` is a dict with keys:

- mod (string | dict | list of string | dicts; optional):
    Element modifiers transformed into `data-` attributes. For
    example: "xl" or {"data-size": "xl"}. Can also be a list of
    strings or dicts for multiple modifiers. Falsy values are removed.

- persisted_props (list of strings; optional):
    Properties whose user interactions will persist after refreshing
    the component or the page. Since only `value` is allowed this prop
    can normally be ignored.

- persistence (string | number | boolean; optional):
    Used to allow user interactions in this component to be persisted
    when the component - or the page - is refreshed. If `persisted` is
    truthy and hasn't changed from its previous value, a `value` that
    the user has changed while using the app will keep that change, as
    long as the new `value` also matches what was given originally.
    Used in conjunction with `persistence_type`. Note:  The component
    must have an `id` for persistence to work.

- persistence_type (a value equal to: 'local', 'session', 'memory'; optional):
    Where persisted user changes will be stored: memory: only kept in
    memory, reset on page refresh. local: window.localStorage, data is
    kept after the browser quit. session: window.sessionStorage, data
    is cleared once the browser quit.

- radius (number; optional):
    Key of `theme.radius` or any valid CSS value to set
    `border-radius,` "xl" by default.

- size (a value equal to: 'xs', 'sm', 'md', 'lg', 'xl'; optional):
    Controls size of the component, `'sm'` by default.

- styles (boolean | number | string | dict | list; optional):
    Adds inline styles directly to inner elements of a component.  See
    Styles API docs.

- tabIndex (number; optional):
    tab-index.

- value (string; optional):
    To be used with Radio group.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.

- wrapperProps (dict; optional):
    Props passed down to the root element.

    `wrapperProps` is a dict with keys:
#### RadioIndicator

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- aria-* (string; optional):
    Wild card aria attributes.

- attributes (boolean | number | string | dict | list; optional):
    Passes attributes to inner elements of a component.  See Styles
    API docs.

- autoContrast (boolean; optional):
    Determines whether icon color with filled variant should depend on
    `background-color`. If luminosity of the `color` prop is less than
    `theme.luminosityThreshold`, then `theme.white` will be used for
    text color, otherwise `theme.black`. Overrides
    `theme.autoContrast`.

- checked (boolean; optional):
    Determines whether the component should have checked styles.

- className (string; optional):
    Class added to the root element, if applicable.

- classNames (dict; optional):
    Adds custom CSS class names to inner elements of a component.  See
    Styles API docs.

- color (optional):
    Key of `theme.colors` or any valid CSS color to set input color in
    checked state, `theme.primaryColor` by default.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- disabled (boolean; optional):
    Determines whether Radio disabled and non-selectable.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- iconColor (optional):
    Key of `theme.colors` or any valid CSS color to set icon color, by
    default value depends on `theme.autoContrast`.

- lightHidden (boolean; optional):
    Determines whether component should be hidden in light color
    scheme with `display: none`.

- loading_state (dict; optional):
    Object that holds the loading state object coming from
    dash-renderer. For use with dash<3.

    `loading_state` is a dict with keys:

- mod (string | dict | list of string | dicts; optional):
    Element modifiers transformed into `data-` attributes. For
    example: "xl" or {"data-size": "xl"}. Can also be a list of
    strings or dicts for multiple modifiers. Falsy values are removed.

- persisted_props (list of strings; optional):
    Properties whose user interactions will persist after refreshing
    the component or the page. Since only `value` is allowed this prop
    can normally be ignored.

- persistence (string | number | boolean; optional):
    Used to allow user interactions in this component to be persisted
    when the component - or the page - is refreshed. If `persisted` is
    truthy and hasn't changed from its previous value, a `value` that
    the user has changed while using the app will keep that change, as
    long as the new `value` also matches what was given originally.
    Used in conjunction with `persistence_type`. Note:  The component
    must have an `id` for persistence to work.

- persistence_type (a value equal to: 'local', 'session', 'memory'; optional):
    Where persisted user changes will be stored: memory: only kept in
    memory, reset on page refresh. local: window.localStorage, data is
    kept after the browser quit. session: window.sessionStorage, data
    is cleared once the browser quit.

- radius (number; optional):
    Key of `theme.radius` or any valid CSS value to set
    `border-radius,` "xl" by default.

- size (a value equal to: 'xs', 'sm', 'md', 'lg', 'xl'; optional):
    Controls size of the component, `'sm'` by default.

- styles (boolean | number | string | dict | list; optional):
    Adds inline styles directly to inner elements of a component.  See
    Styles API docs.

- tabIndex (number; optional):
    tab-index.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.

- wrapperProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the root element.
#### RadioCard

- children (a list of or a singular dash component, string or number; optional):
    RadioCard content.

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- aria-* (string; optional):
    Wild card aria attributes.

- attributes (boolean | number | string | dict | list; optional):
    Passes attributes to inner elements of a component.  See Styles
    API docs.

- checked (boolean; optional):
    Checked state.

- className (string; optional):
    Class added to the root element, if applicable.

- classNames (dict; optional):
    Adds custom CSS class names to inner elements of a component.  See
    Styles API docs.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- disabled (boolean; optional):
    Determines whether RadioCard is disabled and non-selectable.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- lightHidden (boolean; optional):
    Determines whether component should be hidden in light color
    scheme with `display: none`.

- loading_state (dict; optional):
    Object that holds the loading state object coming from
    dash-renderer. For use with dash<3.

    `loading_state` is a dict with keys:

- mod (string | dict | list of string | dicts; optional):
    Element modifiers transformed into `data-` attributes. For
    example: "xl" or {"data-size": "xl"}. Can also be a list of
    strings or dicts for multiple modifiers. Falsy values are removed.

- name (string; optional):
    Value used to associate all related radio cards, required for
    accessibility if used outside of `Radio.Group`.

- persisted_props (list of strings; optional):
    Properties whose user interactions will persist after refreshing
    the component or the page. Since only `value` is allowed this prop
    can normally be ignored.

- persistence (string | number | boolean; optional):
    Used to allow user interactions in this component to be persisted
    when the component - or the page - is refreshed. If `persisted` is
    truthy and hasn't changed from its previous value, a `value` that
    the user has changed while using the app will keep that change, as
    long as the new `value` also matches what was given originally.
    Used in conjunction with `persistence_type`. Note:  The component
    must have an `id` for persistence to work.

- persistence_type (a value equal to: 'local', 'session', 'memory'; optional):
    Where persisted user changes will be stored: memory: only kept in
    memory, reset on page refresh. local: window.localStorage, data is
    kept after the browser quit. session: window.sessionStorage, data
    is cleared once the browser quit.

- radius (number; optional):
    Key of `theme.radius` or any valid CSS value to set
    `border-radius,` "xl" by default.

- styles (boolean | number | string | dict | list; optional):
    Adds inline styles directly to inner elements of a component.  See
    Styles API docs.

- tabIndex (number; optional):
    tab-index.

- value (string; optional):
    To be used with Radio group.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.

- withBorder (boolean; optional):
    Determines whether the card should have border, `True` by default.

- wrapperProps (dict with strings as keys and values of type boolean | number | string | dict | list; optional):
    Props passed down to the root element.