Blazor Radio & Radio Group

    The Ignite UI for Blazor Radio component allows the user to select a single option from an available set of options that are listed side by side.

    Ignite UI for Blazor Radio Example

    Usage

    Before using the IgbRadio and the IgbRadioGroup, you need to register them as follows:

    // in Program.cs file

builder.Services.AddIgniteUIBlazor(
  typeof(IgbRadioModule),
  typeof(IgbRadioGroupModule)
);

    You will also need to link an additional CSS file to apply the styling to the IgbRadio and the IgbRadioGroup components. The following needs to be placed in the wwwroot/index.html file in a Blazor Web Assembly project or the Pages/_Host.cshtml file in a Blazor Server project:

    <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />

    <IgbRadioGroup>
    <IgbRadio>Apple</IgbRadio>
    <IgbRadio>Banana</IgbRadio>
    <IgbRadio>Mango</IgbRadio>
    <IgbRadio>Orange</IgbRadio>
</IgbRadioGroup>

    [!WARNING] The IgbRadio component doesn't work with the standard <form> element. Use IgbForm instead.

    Examples

    Label

    To provide a meaningful label for the IgbRadio, simply place some text between the opening and closing tags:

    <IgbRadio>Apple</IgbRadio>

    You can specify if the label should be positioned before or after the IgbRadio button by setting the label-position attribute. Allowed values are before and after(default):

    <IgbRadio LabelPosition="@RadioLabelPosition.Before">Apple</IgbRadio>

    The IgbRadio can also be labelled by elements external to it. In this case the user is given full control to position and style the label in accordance to their needs.

    <span id="radio-label">Label</span>
<IgbRadio AriaLabelledBy="radio-label" />

    Checked

    You can use the checked attribute to toggle on the radio.

    <IgbRadioGroup>
    <IgbRadio>Apple</IgbRadio>
    <IgbRadio Checked="true">Banana</IgbRadio>
    <IgbRadio>Mango</IgbRadio>
    <IgbRadio>Orange</IgbRadio>
</IgbRadioGroup>

    Invalid

    You can use the invalid attribute to mark the radio as invalid.

    <IgbRadio Invalid="true" />

    Disabled

    You can use the disabled attribute to disable the radio.

    <IgbRadioGroup>
    <IgbRadio>Apple</IgbRadio>
    <IgbRadio Disabled="true">Banana</IgbRadio>
    <IgbRadio>Mango</IgbRadio>
    <IgbRadio>Orange</IgbRadio>
</IgbRadioGroup>

    Group Alignment

    The IgbRadioGroup allows you to easily change the placement directionality of the radio buttons it contains using the alignment attribute. Allowed values are vertical(default) and horizontal.

    <IgbRadioGroup Alignment="@RadioGroupAlignment.Horizontal">
    <IgbRadio>Apple</IgbRadio>
    <IgbRadio>Banana</IgbRadio>
    <IgbRadio>Mango</IgbRadio>
    <IgbRadio>Orange</IgbRadio>
</IgbRadioGroup>

    Forms

    You can use the name and value attributes when using the radio with IgbForm.

    <IgbRadioGroup>
    <IgbRadio Name="fruit" Value="apple">Apple</IgbRadio>
    <IgbRadio Name="fruit" Value="banana">Banana</IgbRadio>
    <IgbRadio Name="fruit" Value="mango">Mango</IgbRadio>
    <IgbRadio Name="fruit" Value="orange">Orange</IgbRadio>
</IgbRadioGroup>

    Styling

    The IgbRadio component exposes several CSS parts (base, control, and label) to give you full control over its styling. You can also modify the global palette colors to change the colors of the radio component:

    :root {
    --ig-primary-h: 60deg;
    --ig-primary-s: 100%;
    --ig-primary-l: 25%;
}

igc-radio::part(control) {
    --size: 18px;
}

    API References

    Additional Resources