Blazor CheckboxInput

The Blazor Bootstrap CheckboxInput component is constructed using an HTML input of type 'checkbox'.

Basic usage #

Option 1

Option 2

Option 1: False

Option 2: True

<CheckboxInput Label="Option 1" @bind-Value="option1" />
<CheckboxInput Label="Option 2" @bind-Value="option2" />

<div class="mt-3">
    <div>Option 1: @option1</div>
    <div>Option 2: @option2</div>
</div>

@code
{
    private bool option1;
    private bool option2 = true;
}

Disable #

Use the Disabled parameter to disable the CheckboxInput.

Default checkbox

Checked checkbox

Razor

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

Default checkbox

Checked checkbox

Razor

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

Default checkbox

Current value: False

<CheckboxInput Label="Default checkbox" Value="isChecked" ValueExpression="() => isChecked" ValueChanged="(value) => CheckboxValueChanged(value)" />
Current value: @isChecked
@code
{
    private bool isChecked;

    private void CheckboxValueChanged(bool value)
    {
        isChecked = value;

        // do something
    }
}

If you like Blazor Bootstrap, give it a star on GitHub!

Blazor CheckboxInput

Basic usage #

Disable #

Events: ValueChanged #

Links

Guides

Community

Blazor Express