Skip to content

Commit a4e10aa

Browse files
committed
kb(Switch): Add KB for indeterminate Switch
1 parent d4ed8a3 commit a4e10aa

File tree

1 file changed

+75
-0
lines changed

1 file changed

+75
-0
lines changed
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
---
2+
title: Add Indeterminate Switch State
3+
description: Learn how to customize the Telerik Switch for Blazor and add an indeterminate state when the component Value is null.
4+
type: how-to
5+
page_title: How to Add Indeterminate State to the Telerik Switch for Blazor
6+
slug: switch-kb-indeterminate-state
7+
tags: blazor, switch, css, styling
8+
ticketid: 1677869, 1587745
9+
res_type: kb
10+
---
11+
12+
## Environment
13+
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>Switch for Blazor</td>
19+
</tr>
20+
</tbody>
21+
</table>
22+
23+
## Description
24+
25+
This KB answers the following questions:
26+
27+
* How to implement an indeterminate state feature for the Switch component with CSS?
28+
* How to use a Switch component with an undetermined state for nullable boolean values?
29+
* How to enable inteterminate Switch state when the value is null?
30+
31+
## Solution
32+
33+
1. Use a specific `Class` parameter value to toggle the indeterminate UI state of the Switch.
34+
1. [Apply custom CSS styles to override](slug:themes-override) the default Switch appearance.
35+
36+
> Indeterminate Switches are uncommon and users may not identify or distinguish them easily. Also evaluate other options, such as [indeterminate checkboxes](slug:checkbox-indeterminate-state) or a [RadioGroup](slug:radiogroup-overview) with three visible options.
37+
38+
>caption Switch with indeterminate state for null values
39+
40+
````RAZOR
41+
<p>Switch <code>Value</code>: <code>@( SwitchValue?.ToString().ToLowerInvariant() ?? "null" )</code></p>
42+
43+
<TelerikSwitch @bind-Value="@SwitchValue"
44+
Class="@( SwitchValue.HasValue ? string.Empty : IndeterminateClass )" />
45+
46+
<TelerikButton OnClick="@( () => SwitchValue = default )">Reset Switch</TelerikButton>
47+
48+
<style>
49+
/* Set a custom Switch background in indeterminate state. */
50+
span.switch-indeterminate .k-switch-track {
51+
background-color: var(--kendo-color-warning);
52+
}
53+
54+
/* Hide Switch labels */
55+
span.switch-indeterminate .k-switch-label-on,
56+
span.switch-indeterminate .k-switch-label-off {
57+
display: none;
58+
}
59+
60+
/* Center the Switch thumb */
61+
span.switch-indeterminate .k-switch-thumb {
62+
transform: translate(0, -50%);
63+
}
64+
</style>
65+
66+
@code {
67+
private bool? SwitchValue { get; set; }
68+
69+
private const string IndeterminateClass = "switch-indeterminate";
70+
}
71+
````
72+
73+
## See Also
74+
75+
* [CheckBox Indeterminate State](slug:checkbox-indeterminate-state)

0 commit comments

Comments
 (0)