Blazor Checkbox Input

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

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
Value	bool	false	✔️	Gets or sets the value.	3.3.0

Methods

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

Events

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

Examples

Basic Usage

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

See demo here

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

See demo here

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

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

See demo here