P11 Blazor UI Library – Bootstrap 5.3 Components

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

<h2 class="mb-3">Basic Checkbox (bool)</h2>
<p>Standard checkbox with label and description. Expected: Toggling works, label is clickable.</p>
<P11Checkbox @bind-Value="basicBoolValue"
             Label="I agree to the terms and conditions"
             Description="Please read the terms and conditions carefully." />
<p>Value: @basicBoolValue</p>

@code {
    // 1. Basic Checkbox (bool)
    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

<h2 class="mb-3">Basic Checkbox (bool?) - Nullable</h2>
<p>Checkbox that can accept a null value. Expected: Initially `null` (unchecked), toggling works.</p>
<P11Checkbox @bind-Value="nullableBoolValue"
             Label="Option is optional"
             Description="Can be selected or remain undefined." />
<p>Value: @(nullableBoolValue.HasValue? nullableBoolValue.ToString() : "null")</p>

@code {
    // 2. Basic Checkbox (bool?) - Nullable
    private bool? nullableBoolValue = null;
}

Checkbox with Initial State (true)

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

Activated by default

Value: True

Implementation

<h2 class="mb-3">Checkbox with Initial State (true)</h2>
<p>Checkbox that is activated by default. Expected: Starts checked.</p>
<P11Checkbox @bind-Value="initialTrueValue"
             Label="Activated by default" />
<p>Value: @initialTrueValue</p>

@code {
    // 3. Checkbox with Initial State (true)
    private bool initialTrueValue = true;
}

Disabled Checkbox

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

This option is disabled

Value (should not change): True

Implementation

<h2 class="mb-3">Disabled Checkbox</h2>
<p>Disabled checkbox. Expected: Not interactive, greyed out appearance.</p>
<P11Checkbox @bind-Value="disabledValue"
             Label="This option is disabled"
             Disabled="true" />
<p>Value (should not change): @disabledValue</p>

@code {
    // 4. Disabled Checkbox
    private bool disabledValue = true;
}

Checkbox as a Switch

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

Activate dark mode

Value: False

Implementation

<h2 class="mb-3">Checkbox as a Switch</h2>
<p>Checkbox in switch style. Expected: Visually like a toggle switch.</p>
<P11Checkbox @bind-Value="switchValue"
             Label="Activate dark mode"
             IsSwitch="true" />
<p>Value: @switchValue</p>

@code {
    // 5. Checkbox as a Switch
    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

<h2 class="mb-3">Checkbox with Custom CSS Class</h2>
<p>Checkbox with additional CSS class for the container. Expected: Red border around the component.</p>
<P11Checkbox @bind-Value="customCssValue"
             Label="Option with special border"
             CssClass="border border-danger p-2 rounded" />
<p>Value: @customCssValue</p>

@code {
    // 6. Checkbox with Custom CSS Class
    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

<h2 class="mb-3">Checkbox with Additional Attributes on Input</h2>
<p>Checkbox with a custom `data-info` attribute. Check in browser inspector.</p>
<P11Checkbox @bind-Value="additionalAttrValue"
             Label="Option with Data Attribute"
             data-info="some-custom-data" />
<p>Value: @additionalAttrValue</p>

@code {
    // 7. Checkbox with Additional Attributes on Input
    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

<h2 class="mb-3">Checkbox with Text on Left</h2>
<p>Checkbox with label text to the left of the checkmark. Expected: Text is on the left.</p>
<P11Checkbox @bind-Value="leftTextValue"
             Label="Text is on the left"
             TextPosition="CheckboxTextPosition.Left" />
<p>Value: @leftTextValue</p>

@code {
    // 8. Checkbox with Text on Left
    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

<h2 class="mb-3">Checkbox with ValueChanged Event</h2>
<p>Demonstrates how to use the <code>ValueChanged</code> event to react to changes in the checkbox state.</p>
<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">@valueChangedCheckboxValue</span></p>

@code {
    // 9. Checkbox with ValueChanged Event
    private bool valueChangedCheckboxValue = false;

    /// <summary>
    /// Event handler for the ValueChanged event of the checkbox.
    /// Updates the bound value and logs the change to the console.
    /// </summary>
    /// <param name="newValue">The new boolean value of the checkbox.</param>
    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.

Expected: Error message is displayed (if ShowDevelopmentErrors=true). This example intentionally uses a missing aria label.

P11Checkbox Configuration Error:

Accessibility Warning: The checkbox is missing both a visible 'Label' and an 'AriaLabel'. For accessibility (A11y), please provide at least one of these parameters.

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

Value: 0

Expected: No error message is displayed, aria label is specified.

Value: False

Implementation

<h2 class="mb-3">Checkbox with Configuration Error (Development Mode)</h2>

<p>Expected: Error message is displayed (if ShowDevelopmentErrors=true). This example intentionally uses an incorrect type for demonstration.</p>
<P11Checkbox @bind-Value="invalidTypeValue"
             Label="Incorrect Type Binding"
             ShowDevelopmentErrors="true" />

<p>Expected: Error message is displayed (if ShowDevelopmentErrors=true). This example intentionally uses a missing aria label.</p>
<P11Checkbox @bind-Value="basicBoolValue2"
             AriaLabel=""
             ShowDevelopmentErrors="true" />

<p>Value: @invalidTypeValue</p>

<hr />

<p>Expected: No error message is displayed, aria label is specified.</p>
<P11Checkbox @bind-Value="basicBoolValue2"
             AriaLabel="Accept terms"
             ShowDevelopmentErrors="true" />

<p>Value: @basicBoolValue2</p>

@code {
    // 10. Checkbox with Configuration Error (intentional for demonstration)
    // This intentionally uses an incorrect type (int instead of bool/bool?)
    // to demonstrate the ShowDevelopmentErrors parameter.
    private int invalidTypeValue = 0;
    private bool basicBoolValue2 = false;
}

Component API

Parameter	Type	Default	Description
`Label`	`string?`	`null`	Gets or sets the label text for the checkbox.
`AriaLabel`	`string?`	`null`	An ARIA label for accessibility, providing a descriptive name for screen readers when the button's visible content is not sufficient.
`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.