# RadioButton

> The .NET Multi-platform App UI (.NET MAUI) [RadioButton](https://learn.microsoft.com/en-us/dotnet/api/microsoft.maui.controls.radiobutton) is a type of button that allows users to select one option from a set. Each option is represented by one radio button, and you can only select one radio button in a group. 

Official documentation:\
<https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/radiobutton>\
\
MauiReactor sample app:\
<https://github.com/adospace/mauireactor-samples/tree/main/Controls/RadioButtonTestApp>

## Group of radio buttons with string content

```csharp
new VStack(spacing: 5)
{
    new RadioButton("Radio 1"),
    new RadioButton("Radio 2"),
    new RadioButton("Radio 3"),
    new RadioButton("Radio 4")
        .IsChecked(true)
},
```

<figure><img src="/files/b7ZptKfdqoJVaBw6WZdg" alt=""><figcaption><p>Simple radio button group</p></figcaption></figure>

## Group of radio buttons with custom content

```csharp
new VStack
{
    new RadioButton
    {
        new Image("icon_email.png")
    },
    new RadioButton
    {
        new Image("icon_lock.png")
    }
}
```

<figure><img src="/files/orfrvqUIYKmqvAerK1fW" alt=""><figcaption><p>Radio buttons with custom content (iOS)</p></figcaption></figure>

{% hint style="warning" %}
On Android, you must define a ControlTemplate to show custom content for the radio button.

<https://learn.microsoft.com/en-us/dotnet/maui/user-interface/controls/radiobutton?view=net-maui-7.0#redefine-radiobutton-appearance>

In MauiReactor you can place the control template in a XAML resource file
{% endhint %}

This is a sample control template for Android:

```xml
<Style TargetType="RadioButton">
    <Setter Property="Background" Value="Transparent"/>
    <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Black}, Dark={StaticResource White}}" />
    <Setter Property="FontFamily" Value="OpenSansRegular"/>
    <Setter Property="FontSize" Value="14"/>
    <Setter Property="VisualStateManager.VisualStateGroups">
        <VisualStateGroupList>
            <VisualStateGroup x:Name="CommonStates">
                <VisualState x:Name="Normal" />
                <VisualState x:Name="Disabled">
                    <VisualState.Setters>
                        <Setter Property="TextColor" Value="{AppThemeBinding Light={StaticResource Gray300}, Dark={StaticResource Gray600}}" />
                    </VisualState.Setters>
                </VisualState>
            </VisualStateGroup>
        </VisualStateGroupList>
    </Setter>
    <Setter Property="ControlTemplate">
        <ControlTemplate>
            <Grid Margin="4">
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroupList>
                        <VisualStateGroup x:Name="CheckedStates">
                            <VisualState x:Name="Checked">
                                <VisualState.Setters>
                                    <Setter TargetName="check"
                                            Property="Opacity"
                                            Value="1" />
                                </VisualState.Setters>
                            </VisualState>
                            <VisualState x:Name="Unchecked">
                                <VisualState.Setters>
                                    <Setter TargetName="check"
                                            Property="Opacity"
                                            Value="0" />
                                </VisualState.Setters>
                            </VisualState>
                        </VisualStateGroup>
                    </VisualStateGroupList>
                </VisualStateManager.VisualStateGroups>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition/>
                </Grid.ColumnDefinitions>
                <Grid Margin="4"
                      WidthRequest="18"
                      HeightRequest="18"
                      HorizontalOptions="End"
                      VerticalOptions="Start">
                    <Ellipse Stroke="Blue"
                             Fill="White"
                             WidthRequest="16"
                             HeightRequest="16"
                             HorizontalOptions="Center"
                             VerticalOptions="Center" />
                    <Ellipse x:Name="check"
                             Fill="Blue"
                             WidthRequest="8"
                             HeightRequest="8"
                             HorizontalOptions="Center"
                             VerticalOptions="Center" />
                </Grid>
                <ContentPresenter
                        Grid.Column="1"
                        VerticalOptions="Center"/>
            </Grid>
        </ControlTemplate>
    </Setter>
</Style>
```

Using the above style:

<figure><img src="/files/gnVfH4QHR5ojvKkAuZI1" alt=""><figcaption><p>Radio buttons with custom style</p></figcaption></figure>

## Bonus tip: Radio buttons for an Enum

Say you have an Enum like this:

```csharp
enum VehicleType
{
    Car,
    Coach,
    Motorcycle
}
```

This code enumerates its values and displays them in a button group:

```csharp
public VisualNode RadioButtonsEnum<T>() where T : struct, System.Enum
{
    return new VStack
    {
        Enum.GetValues<T>()
            .Select(_=> new RadioButton(_.ToString()))
    };
}
```

<figure><img src="/files/aKxrQTrCdY43nKqVKY1s" alt=""><figcaption><p>Radio buttons for an enum type</p></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://adospace.gitbook.io/mauireactor/components/controls/radiobutton.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.