CheckboxInput
The CheckboxInput component is used to capture a boolean choice with Bulma's native checkbox styling and Blazor data binding.
How it works #
The CheckboxInput component wraps a native checkbox in Bulma's
How to use:
This demo shows the basic checked-state binding and inline label content of the
checkbox label pattern, making it easy to combine checked-state binding with inline label content.
How to use:
- Add the
CheckboxInputcomponent to your page. - Bind its
Valueproperty with@bind-Value. - Place the label text or other inline content between the opening and closing tags.
CheckboxInput component.
Selected value: True
<CheckboxInput @bind-Value="rememberMe">
Remember me
</CheckboxInput>
<div class="mt-2">Selected value: @rememberMe</div>
@code {
private bool rememberMe = true;
}
Disabled #
The CheckboxInput component can be disabled to prevent user interaction while still displaying its checked state and label.
How to use:
This demo shows how to render the
How to use:
- Add the
CheckboxInputcomponent to your page. - Set
Disabled="true"to make the checkbox non-interactive. - Provide the label content between the component tags as usual.
CheckboxInput component in a disabled state.
<CheckboxInput Value="true" Disabled="true">
Save my preferences
</CheckboxInput>
Events: ValueChanged #
The CheckboxInput component exposes a
How to use:
This demo shows how to handle the checked-state change using the
ValueChanged event, allowing you to react whenever the checkbox is checked or unchecked.
How to use:
- Set the
Valueparameter to the current checked state. - Handle the
ValueChangedcallback to update your logic when the value changes. - Use the updated value elsewhere in your UI as needed.
ValueChanged event.
Selected value: False
<CheckboxInput Value="@acceptedTerms" ValueChanged="OnValueChanged">
I agree to the terms and conditions
</CheckboxInput>
<div class="mt-2">Selected value: @acceptedTerms</div>
@code {
private bool acceptedTerms;
private void OnValueChanged(bool value)
{
acceptedTerms = value;
}
}