Blazor CheckboxInput
The Blazor Bootstrap CheckboxInput component is constructed using an HTML input of type 'checkbox'.
Basic usage #
Disable #
Use the
Disabled parameter to disable the CheckboxInput.<CheckboxInput Label="Default checkbox" @bind-Value="isChecked" Disabled="disabled" />
<CheckboxInput Label="Checked checkbox" @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
CheckboxInput.NOTE
Do not use both the Disabled parameter and Enable() & Disable() methods.
<CheckboxInput @ref="checkboxInputRef1" Label="Default checkbox" @bind-Value="isChecked" />
<CheckboxInput @ref="checkboxInputRef2" Label="Checked checkbox" @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 CheckboxInput? checkboxInputRef1;
private CheckboxInput? checkboxInputRef2;
private bool isChecked;
private bool isChecked2 = true;
private void Disable()
{
checkboxInputRef1.Disable();
checkboxInputRef2.Disable();
}
private void Enable()
{
checkboxInputRef1.Enable();
checkboxInputRef2.Enable();
}
}Events: ValueChanged #
This event fires when the
CheckboxInput value changes, but not on every keystroke.