sufi-blazor/docs/components/forms/SbCheckbox.md

SbCheckbox

A checkbox component with support for labels, indeterminate state, and color variants.

Parameters

Parameter	Type	Default	Description
Value	bool	false	Checkbox checked state (two-way bindable)
ValueChanged	EventCallback<bool>	-	Callback when value changes
Label	string?	null	Checkbox label text
Indeterminate	bool	false	Whether the checkbox is in indeterminate state
Disabled	bool	false	Whether the checkbox is disabled
Color	SbColor	SbColor.Primary	Checkbox accent color
Id	string?	null	Element ID for the input
Class	string?	null	Additional CSS classes
Style	string?	null	Inline styles
AdditionalAttributes	Dictionary<string, object>?	null	Additional HTML attributes (CaptureUnmatchedValues)

Events

Event	Type	Description
ValueChanged	EventCallback<bool>	Fired when the checkbox value changes

Templates / Slots (RenderFragments)

Slot	Type	Description
ChildContent	RenderFragment	Custom label content (takes precedence over Label parameter)

Template Usage Examples

Custom Label with ChildContent

<SbCheckbox @bind-Value="acceptTerms">
    I agree to the <SbLink Href="/terms">Terms of Service</SbLink> 
    and <SbLink Href="/privacy">Privacy Policy</SbLink>
</SbCheckbox>

CSS Classes

• sb-checkbox - Base class
• sb-checkbox--{color} - Color variant (primary, secondary, success, danger, etc.)
• sb-checkbox--checked - Checked state
• sb-checkbox--indeterminate - Indeterminate state
• sb-checkbox--disabled - Disabled state
• sb-checkbox__input - Hidden native input
• sb-checkbox__box - Visual checkbox box
• sb-checkbox__check - Check icon
• sb-checkbox__indeterminate - Minus icon for indeterminate
• sb-checkbox__label - Label text

Accessibility

• Uses native <input type="checkbox">
• aria-checked indicates current state (true/false/mixed)
• Label wraps input for click area expansion
• Keyboard accessible (Space to toggle)

Examples

Basic Usage

<SbCheckbox @bind-Value="isChecked" Label="Enable notifications" />

Color Variants

<SbCheckbox @bind-Value="opt1" Label="Primary" Color="SbColor.Primary" />
<SbCheckbox @bind-Value="opt2" Label="Success" Color="SbColor.Success" />
<SbCheckbox @bind-Value="opt3" Label="Danger" Color="SbColor.Danger" />

Indeterminate State

<SbCheckbox Value="@parentChecked" 
            Indeterminate="@isIndeterminate"
            ValueChanged="HandleParentChange"
            Label="Select all" />

Disabled States

<SbCheckbox Value="true" Disabled="true" Label="Checked and disabled" />
<SbCheckbox Value="false" Disabled="true" Label="Unchecked and disabled" />

With Rich Label Content

<SbCheckbox @bind-Value="rememberMe">
    <SbStack Direction="SbStackDirection.Row" Gap="2" Align="SbAlign.Center">
        <SbIcon Name="shield-check" Size="SbSize.Sm" />
        <span>Remember this device for 30 days</span>
    </SbStack>
</SbCheckbox>

Form Validation

<EditForm Model="model">
    <SbCheckbox @bind-Value="model.AcceptTerms" 
                Label="I accept the terms and conditions"
                Id="accept-terms" />
    <SbFieldError For="() => model.AcceptTerms" />
</EditForm>

Select All Pattern

@code {
    private bool selectAll;
    private bool isIndeterminate;
    private List<Item> items = new();
    
    private void OnSelectAllChanged(bool value)
    {
        selectAll = value;
        isIndeterminate = false;
        foreach (var item in items)
        {
            item.Selected = value;
        }
    }
    
    private void OnItemChanged()
    {
        var selectedCount = items.Count(i => i.Selected);
        selectAll = selectedCount == items.Count;
        isIndeterminate = selectedCount > 0 && selectedCount < items.Count;
    }
}

<SbCheckbox Value="@selectAll" 
            Indeterminate="@isIndeterminate"
            ValueChanged="OnSelectAllChanged"
            Label="Select all items" />

@foreach (var item in items)
{
    <SbCheckbox @bind-Value="item.Selected" 
                Label="@item.Name"
                ValueChanged="_ => OnItemChanged()" />
}