Add Indeterminate Switch State

Environment

Product

Switch for Blazor

Description

This KB answers the following questions:

• How to implement an indeterminate state feature for the Switch component with CSS?
• How to use a Switch component with an undetermined state for nullable boolean values?
• How to enable inteterminate Switch state when the value is null?

Solution

1. Use a specific Class parameter value to toggle the indeterminate UI state of the Switch.
2. Apply custom CSS styles to override the default Switch appearance.

Indeterminate Switches are uncommon and users may not identify or distinguish them easily. Also evaluate other options, such as indeterminate checkboxes or a RadioGroup with three visible options.

Switch with indeterminate state for null values

<p>Switch <code>Value</code>: <code>@( SwitchValue?.ToString().ToLowerInvariant() ?? "null" )</code></p>

<TelerikSwitch @bind-Value="@SwitchValue"
               Class="@( SwitchValue.HasValue ? string.Empty : IndeterminateClass )" />

<TelerikButton OnClick="@( () => SwitchValue = default )">Reset Switch</TelerikButton>

<style>
    /* Set a custom Switch background in indeterminate state. */
    span.switch-indeterminate .k-switch-track {
        background-color: var(--kendo-color-warning);
    }

    /* Hide Switch labels */
    span.switch-indeterminate .k-switch-label-on,
    span.switch-indeterminate .k-switch-label-off {
        display: none;
    }

        /* Center the Switch thumb */
        span.switch-indeterminate .k-switch-thumb {
            transform: translate(0, -50%);
        }
</style>

@code {
    private bool? SwitchValue { get; set; }

    private const string IndeterminateClass = "switch-indeterminate";
}

See Also

• CheckBox Indeterminate State