Blazor RadioInput
The Blazor Bootstrap RadioInput component is constructed using an HTML input of type 'radio'.
Basic usage #
Disable #
Use the
Disabled parameter to disable the RadioInput.Would you like to receive notifications?
<p>Would you like to receive notifications?</p>
<RadioInput Name="EnableNotifications" Label="Yes" @bind-Value="isChecked" Disabled="disabled" />
<RadioInput Name="EnableNotifications" Label="No" @bind-Value="isChecked2" Disabled="disabled" />
<div class="mt-3">
<Button Color="ButtonColor.Primary" Size="ButtonSize.ExtraSmall" @onclick="Enable"> Enable </Button>
<Button Color="ButtonColor.Secondary" Size="ButtonSize.ExtraSmall" @onclick="Disable"> Disable </Button>
<Button Color="ButtonColor.Warning" Size="ButtonSize.ExtraSmall" @onclick="Toggle"> Toggle </Button>
</div>
@code
{
private bool isChecked;
private bool isChecked2 = true;
private bool disabled = true;
private void Enable() => disabled = false;
private void Disable() => disabled = true;
private void Toggle() => disabled = !disabled;
}Also, use Enable() and Disable() methods to enable and disable the
RadioInput.NOTE
Do not use both the Disabled parameter and Enable() & Disable() methods.
Would you like to receive notifications?
<p>Would you like to receive notifications?</p>
<RadioInput @ref="radioInputRef" Name="EnableNotifications" Label="Yes" @bind-Value="isChecked" />
<RadioInput @ref="radioInputRef2" Name="EnableNotifications" Label="No" @bind-Value="isChecked2" />
<div class="mt-3">
<Button Color="ButtonColor.Primary" Size="ButtonSize.ExtraSmall" @onclick="Enable"> Enable </Button>
<Button Color="ButtonColor.Secondary" Size="ButtonSize.ExtraSmall" @onclick="Disable"> Disable </Button>
</div>
@code
{
private RadioInput? radioInputRef;
private RadioInput? radioInputRef2;
private bool isChecked;
private bool isChecked2 = true;
private void Disable()
{
radioInputRef.Disable();
radioInputRef2.Disable();
}
private void Enable()
{
radioInputRef.Enable();
radioInputRef2.Enable();
}
}