Blazor Radio Input

The Blazor Bootstrap RadioInput component is constructed using an HTML input of type radio.

Parameters

Name	Type	Default	Required	Description	Added Version
Disabled	bool	false		Gets or sets the disabled state.	3.3.0
Label	string	null		Gets or sets the label.	3.3.0
Name	string	null		Gets or sets the name.	3.3.0
Value	bool	false	✔️	Gets or sets the value.	3.3.0

Methods

Name	Returns	Description	Added Version
Disable()	void	Disables autocomplete.	3.3.0
Enable()	void	Enables autocomplete.	3.3.0

Events

Name	Description	Added Version
ValueChanged	This event fires when the RadioInput value changes.	3.3.0

Examples

Basic Usage

<p>Would you like to receive notifications?</p>
<RadioInput Name="EnableNotifications" Label="Yes" @bind-Value="isYesOn" />
<RadioInput Name="EnableNotifications" Label="No" @bind-Value="isNoOn" />

<div class="mt-3">
    <div>IsYesOn: @isYesOn</div>
    <div>IsNoOn: @isNoOn</div>
</div>

@code
{
    private bool isYesOn;
    private bool isNoOn = true;
}

See demo here

Disable

Use the Disabled parameter to disable the RadioInput.

<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.

<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();
    }
}

See demo here