Switch component

The <Switch> component provides users the ability to choose between two distinct values. These are very similar to a toggle, or on/off switch, though aesthetically different than a checkbox.

Switches are the preferred way to adjust settings on mobile. The option that the switch controls, as well as the state it’s in, should be made clear from the corresponding inline label.

Examples

Basic

<Switch TValue="bool">Remember me</Switch>

Binding

Two-way binding

<Switch TValue="bool" @bind-Checked="@rememberMe">Remember Me</Switch>
@code{
    bool rememberMe;
}

Manual event binding

<Switch TValue="bool" Checked="@rememberMe" CheckedChanged="@OnRememberMeChanged">Remember Me</Switch>
@code{
    bool rememberMe;

    Task OnRememberMeChanged( bool value )
    {
        rememberMe = value;

        return Task.CompletedTask;
    }
}

Attributes

Name Description Type Default
TValue Data type of Checked value. Support types are bool and bool?. generic
Checked Gets or sets the checked flag. TValue default
CheckedChanged Occurs when the check state is changed. EventCallback<TValue>
Color Component visual or contextual style variants. Color None