Toggle

<BitToggle Label="Basic" />
<BitToggle Label="Disabled" IsEnabled="false" />

<BitToggle Label="Text" Text="This is a toggle!" />
<BitToggle Label="OnText & OffText" OnText="Toggle is On" OffText="Toggle is Off" />

<BitToggle Label="This is an inline label" Inline />

<BitToggle>
    <LabelTemplate>
        <div style="display:flex;align-items:center;gap:10px">
            <BitLabel Style="color:green">This is custom Label</BitLabel>
            <BitIcon IconName="@BitIconName.Filter" />
        </div>
    </LabelTemplate>
</BitToggle>

<BitToggle Label="This is a reversed label" Reversed />

<BitToggle Label="This is a reversed inline label" Reversed Inline />

<BitToggle Label="This is a full-width toggle" FullWidth Inline />

<BitToggle Label="This is a reversed full-width toggle" Reversed FullWidth Inline />

<BitToggle Label="One-way" Value="oneWayValue" />
<BitToggleButton @bind-IsChecked="oneWayValue" OnText="On" OffText="Off" />

<BitToggle Label="Two-way" @bind-Value="twoWayValue" />
<BitToggleButton @bind-IsChecked="twoWayValue" OnText="On" OffText="Off" />
@code {
    private bool oneWayValue;
    private bool twoWayValue;
}
                    

<style>
    .custom-thumb {
        background: #fff;
        width: 30px;
        height: 30px;
    }

    .custom-button {
        padding: 0;
        width: 52px;
        height: 22px;
        border: none;
        background: #ccc;
        border-radius: 11px;
    }

    .custom-check .custom-thumb {
        background: #ff6868;
    }

    .custom-check .custom-button {
        background: #ffcece;
    }

    .custom-check .custom-button:hover .custom-thumb {
        background: #ff6868;
    }
</style>


<BitToggle Label="Styles"
           Styles="@(new() { Root = "--toggle-background: lightgray;", Checked = "--toggle-background: #2ecc71;",
                             Thumb = "background: whitesmoke; height: 28px; width: 28px;",
                             Button = "background: var(--toggle-background); border: none; border-radius: 60px; padding: 0; height: 30px; width: 50px;" } )" />

<BitToggle Label="Classes"
           Classes="@(new() { Thumb = "custom-thumb",
                              Button = "custom-button",
                              Checked = "custom-check" } )" />

<style>
    .validation-message {
        color: red;
    }
</style>

<EditForm Model="validationModel" OnValidSubmit="HandleValidSubmit" OnInvalidSubmit="HandleInvalidSubmit">
    <DataAnnotationsValidator />

    <BitToggle Label="Terms and conditions" Text="I agree." @bind-Value="validationModel.TermsAgreement" />
    <ValidationMessage For="@(() => validationModel.TermsAgreement)" />

    <BitButton ButtonType="BitButtonType.Submit">Submit</BitButton>
</EditForm>
@code {
    public class BitToggleValidationModel
    {
        [Range(typeof(bool), "true", "true", ErrorMessage = "You must agree to the terms and conditions.")]
        public bool TermsAgreement { get; set; } = true;
    }
    
    public BitToggleValidationModel validationModel { get; set; } = new();
    
    private async Task HandleValidSubmit() { }
    private void HandleInvalidSubmit() { }
}
                    

<BitToggle Label="این یک تاگل است" Dir="BitDir.Rtl" OnText="روشن" OffText="خاموش" />

<BitToggle Label="این یک تاگل خطی است" Dir="BitDir.Rtl" Inline />

<BitToggle Label="این یک تاگل خطی برعکس است" Dir="BitDir.Rtl" Reversed Inline />