P11Checkbox Component

The P11Checkbox component wraps the native HTML <input type="checkbox"> element, providing an accessible and customizable checkbox solution. It integrates seamlessly with Blazor's data binding and supports Bootstrap's styling for standard checkboxes and switches.

Note: This component offers properties for labels, descriptions, and styling, enhancing the standard HTML checkbox functionality.

Basic Checkbox (bool)

Standard checkbox with label and description. Expected: Toggling works, label is clickable.

I agree to the terms and conditions

Please read the terms and conditions carefully.

Value: False

Implementation


<P11Checkbox @bind-Value="basicBoolValue"
             Label="I agree to the terms and conditions"
             Description="Please read the terms and conditions carefully." />
<p>Value: @basicBoolValue</p>


private bool basicBoolValue = false;

Basic Checkbox (bool?) - Nullable

Checkbox that can accept a null value. Expected: Initially `null` (unchecked), toggling works.

Option is optional

Can be selected or remain undefined.

Value: null

Implementation


<P11Checkbox @bind-Value="nullableBoolValue"
             Label="Option is optional"
             Description="Can be selected or remain undefined." />
<p>Value: @(nullableBoolValue.HasValue? nullableBoolValue.ToString() : " null ")</p>


private bool? nullableBoolValue = null;

Checkbox with Initial State (true)

Checkbox that is activated by default. Expected: Starts checked.

Activated by default

Value: True

Implementation


<P11Checkbox @bind-Value="initialTrueValue"
             Label="Activated by default" />
<p>Value: @initialTrueValue</p>


private bool initialTrueValue = true;

Disabled Checkbox

Disabled checkbox. Expected: Not interactive, greyed out appearance.

This option is disabled

Value (should not change): True

Implementation


<P11Checkbox @bind-Value="disabledValue"
             Label="This option is disabled"
             Disabled="true" />
<p>Value (should not change): True</p>


private bool disabledValue = true;

Checkbox as a Switch

Checkbox in switch style. Expected: Visually like a toggle switch.

Activate dark mode

Value: False

Implementation


<P11Checkbox @bind-Value="switchValue"
             Label="Activate dark mode"
             IsSwitch="true" />
<p>Value: @switchValue</p>


private bool switchValue = false;

Checkbox with Custom CSS Class

Checkbox with additional CSS class for the container. Expected: Red border around the component.

Option with special border

Value: False

Implementation


<P11Checkbox @bind-Value="customCssValue"
             Label="Option with special border"
             CssClass="border border-danger p-2 rounded" />
<p>Value: @customCssValue</p>


private bool customCssValue = false;

Checkbox with Additional Attributes on Input

Checkbox with a custom `data-info` attribute. Check in browser inspector.

Option with Data Attribute

Value: False

Implementation


<P11Checkbox @bind-Value="additionalAttrValue"
             Label="Option with Data Attribute"
             data-info="some-custom-data" />
<p>Value: @additionalAttrValue</p>


private bool additionalAttrValue = false;

Checkbox with Text on Left

Checkbox with label text to the left of the checkmark. Expected: Text is on the left.

Text is on the left

Value: False

Implementation


<P11Checkbox @bind-Value="leftTextValue"
             Label="Text is on the left"
             TextPosition="CheckboxTextPosition.Left" />
<p>Value: @leftTextValue</p>


private bool leftTextValue = false;

Checkbox with ValueChanged Event

Demonstrates how to use the ValueChanged event to react to changes in the checkbox state.

Monitor my changes

The value below will update when you toggle this checkbox.

Current Value: False

Implementation


<P11Checkbox Value="valueChangedCheckboxValue"
             ValueChanged="@((bool isChecked) => OnValueChangedCheckbox(isChecked))"
             Label="Monitor my changes"
             Description="The value below will update when you toggle this checkbox." />
<p>Current Value: <span class="fw-bold">False</span></p>


private bool valueChangedCheckboxValue = false;

private void OnValueChangedCheckbox(bool newValue)
{
    valueChangedCheckboxValue = newValue;
    // You can add additional logic here that should run when the value changes
    Console.WriteLine($"Checkbox value changed to: {newValue}");
}

Checkbox with Configuration Error (Development Mode)

Expected: Error message is displayed (if ShowDevelopmentErrors=true). This example intentionally uses an incorrect type for demonstration.

Incorrect Type Binding

P11Checkbox Configuration Error:

P11Checkbox Configuration Error: TValue for P11Checkbox must be 'bool' or 'bool?'. Current TValue is 'Int32'.

This is only visible during development. Please correct the parameters or set ShowDevelopmentErrors = false to suppress this warning.

Value: 0

Implementation


<P11Checkbox @bind-Value="invalidTypeValue"
             Label="Incorrect Type Binding"
             ShowDevelopmentErrors="true" />
<p>Value: @invalidTypeValue</p>


// This intentionally uses an incorrect type (int instead of bool/bool?)
// to demonstrate the ShowDevelopmentErrors parameter.
private int invalidTypeValue = 0;

Component API

Parameter	Type	Default	Description
`Label`	`string?`	`null`	Gets or sets the label text for the checkbox.
`Description`	`string?`	`null`	Gets or sets a descriptive text that will appear below the checkbox, providing additional guidance or context.
`Value`	`TValue?`	`null`	The value of the checkbox. Used for two-way binding with `@bind-Value`. Expected types are `bool` or `bool?`.
`AdditionalAttributes`	`Dictionary<string, object>?`	`null`	Gets or sets a collection of additional attributes that will be applied to the `input` element. Allows passing standard HTML attributes directly.
`CssClass`	`string?`	`null`	Gets or sets an optional CSS class string that will be applied to the root `div` element of the component.
`Disabled`	`bool`	`false`	Gets or sets a value indicating whether the checkbox should be displayed in a disabled state.
`IsSwitch`	`bool`	`false`	Gets or sets a value indicating whether the checkbox should be rendered as an inline switch. Applies Bootstrap's `'form-switch'` class.
`TextPosition`	`CheckboxTextPosition`	`CheckboxTextPosition.Right`	Gets or sets the position of the label text relative to the checkbox. Default is Right.
`ShowDevelopmentErrors`	`bool`	`true`	If `true`, configuration error messages will be displayed on the UI in development mode. Set to `false` to suppress them.
Events
`ValueChanged`	`EventCallback<TValue>`	-	An `EventCallback` that is invoked when the `Value` changes. Used for two-way binding.