Switch

A control that allows the user to toggle between on and off.

Basic

A basic switch with two-way binding.

Enabled: False

<div class="flex items-center space-x-2">
    <Switch @bind-Checked="isEnabled" />
    <Label>Airplane Mode</Label>
</div>

@code {
    private bool isEnabled = false;
}

Form Example

Use Switch in a settings form.

Receive emails about new products.

Receive emails about your account security.

<div class="flex items-center justify-between">
    <div class="space-y-0.5">
        <Label>Marketing emails</Label>
        <p class="text-sm text-muted-foreground">Receive emails about new products.</p>
    </div>
    <Switch @bind-Checked="marketing" />
</div>

Disabled

Switch can be disabled.

<Switch Checked="true" Disabled="true" />