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

SbSwitch

A toggle switch component for boolean on/off states. More visually distinct than a checkbox for settings and preferences.

Parameters

Parameter	Type	Default	Description
Value	bool	false	Switch on/off state (two-way bindable)
ValueChanged	EventCallback<bool>	-	Callback when value changes
Label	string?	null	Switch label text
Disabled	bool	false	Whether the switch is disabled
Color	SbColor	SbColor.Primary	Switch accent color when on
Size	SbSize	SbSize.Md	Switch size (Sm, Md, Lg)
HelperText	string?	null	Helper text shown below the label
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 switch value changes

Templates / Slots (RenderFragments)

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

Template Usage Examples

Custom Label

<SbSwitch @bind-Value="darkMode">
    <SbStack Direction="SbStackDirection.Row" Gap="2" Align="SbAlign.Center">
        <SbIcon Name="moon" Size="SbSize.Sm" />
        <span>Dark Mode</span>
    </SbStack>
</SbSwitch>

CSS Classes

• sb-switch - Base class
• sb-switch--{color} - Color variant (primary, success, warning, danger, etc.)
• sb-switch--{size} - Size variant (sm, md, lg)
• sb-switch--checked - On state
• sb-switch--disabled - Disabled state
• sb-switch__input-wrapper - Wrapper around input
• sb-switch__input - Native input
• sb-switch__track - Background track
• sb-switch__thumb - Sliding thumb
• sb-switch__text - Wrapper for label and helper
• sb-switch__label - Label text
• sb-switch__helper - Helper text

Accessibility

• Uses native <input type="checkbox"> with role="switch"
• aria-checked indicates current state
• Keyboard accessible (Space to toggle)
• Label wraps input for expanded click area

Examples

Basic Usage

<SbSwitch @bind-Value="isEnabled" Label="Enable feature" />

Color Variants

<SbSwitch @bind-Value="setting1" Label="Primary" Color="SbColor.Primary" />
<SbSwitch @bind-Value="setting2" Label="Success" Color="SbColor.Success" />
<SbSwitch @bind-Value="setting3" Label="Warning" Color="SbColor.Warning" />

Settings Panel

<SbCard>
    <Header>
        <SbHeading Level="3">Notifications</SbHeading>
    </Header>
    <SbStack Gap="4">
        <SbSwitch @bind-Value="emailNotifications" Label="Email notifications" />
        <SbSwitch @bind-Value="pushNotifications" Label="Push notifications" />
        <SbSwitch @bind-Value="smsNotifications" Label="SMS notifications" />
    </SbStack>
</SbCard>

Disabled States

<SbSwitch Value="true" Disabled="true" Label="Always on (locked)" />
<SbSwitch Value="false" Disabled="true" Label="Always off (locked)" />

With Rich Label

<SbSwitch @bind-Value="autoSave">
    <div>
        <strong>Auto-save</strong>
        <SbText Size="SbTextSize.Sm" Color="SbColor.Muted">
            Automatically save changes every 5 minutes
        </SbText>
    </div>
</SbSwitch>

Controlled Switch

<SbSwitch Value="@isPublic" 
          ValueChanged="OnPublicChanged"
          Label="Make profile public" />

@code {
    private bool isPublic;
    
    private async Task OnPublicChanged(bool value)
    {
        if (value)
        {
            var confirmed = await DialogService.Confirm(
                "Making your profile public will allow anyone to view it.");
            if (confirmed)
            {
                isPublic = true;
            }
        }
        else
        {
            isPublic = false;
        }
    }
}