A shadcn/ui inspired Blazor component library

Installation

Add the Switch component using the CLI:

shadcnblazor component add switch

Usage

The Switch component is a toggle for boolean on/off values. Use ChildContent for the label. Bind Checked for two-way state, or use CheckedChanged for one-way updates.

Airplane Mode

1

2

3

4

5

<Switch @bind-Checked="_enabled">Airplane Mode</Switch>

@code {
    private bool _enabled;
}

Examples

Sizes

Use the Size parameter for Sm, Md, or Lg variants.

Small Default Large

1

2

3

4

5

6

7

8

9

10

11

<div class="flex flex-col gap-4">
    <Switch @bind-Checked="_small" Size="Size.Sm">Small</Switch>
    <Switch @bind-Checked="_default" Size="Size.Md">Default</Switch>
    <Switch @bind-Checked="_large" Size="Size.Lg">Large</Switch>
</div>

@code {
    private bool _small;
    private bool _default = true;
    private bool _large;
}

API Reference

Switch

Toggle switch for boolean on/off values.

Properties

Name	Type	Description
`AdditionalAttributes`	`Dictionary<string, Object>`
`Checked`	`bool`	Whether the switch is on.
`CheckedChanged`	`EventCallback<bool>`	Callback invoked when the checked state changes.
`ChildContent`	`RenderFragment`	Content to display alongside the switch (e.g., label).
`Class`	`string`
`Disabled`	`bool`	Whether the switch is disabled.
`Size`	`Size`	The size of the switch.

Events

Name	Type	Description
`CheckedChanged`	`EventCallback<bool>`	Callback invoked when the checked state changes.

Methods

Method	Returns	Description
`Equals`	`bool`
`GetHashCode`	`int`
`GetType`	`Type`
`SetParametersAsync`	`Task`
`ToString`	`string`

Mobile support for API reference coming soon.