Switch component

Use Switch to toggle the state of a single setting on or off.

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

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

Usage

Two-way binding

<Switch TValue="bool" @bind-Checked="@rememberMe">Remember Me</Switch>

@code{
    bool rememberMe;
}

Manual binding

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

@code{
    bool rememberMe;

    void OnRememberMeChanged( bool value )
    {
        rememberMe = value;
    }
}

Attributes

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