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. UseForm
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 Form
.
<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
Form
IgbRadioGroup
IgbRadio