diff --git a/knowledge-base/switch-indeterminate-state.md b/knowledge-base/switch-indeterminate-state.md new file mode 100644 index 000000000..9ef0dc80a --- /dev/null +++ b/knowledge-base/switch-indeterminate-state.md @@ -0,0 +1,75 @@ +--- +title: Add Indeterminate Switch State +description: Learn how to customize the Telerik Switch for Blazor and add an indeterminate state when the component Value is null. +type: how-to +page_title: How to Add Indeterminate State to the Telerik Switch for Blazor +slug: switch-kb-indeterminate-state +tags: blazor, switch, css, styling +ticketid: 1677869, 1587745 +res_type: kb +--- + +## Environment + + + + + + + + +
ProductSwitch 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. +1. [Apply custom CSS styles to override](slug:themes-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](slug:checkbox-indeterminate-state) or a [RadioGroup](slug:radiogroup-overview) with three visible options. + +>caption Switch with indeterminate state for null values + +````RAZOR +

Switch Value: @( SwitchValue?.ToString().ToLowerInvariant() ?? "null" )

+ + + +Reset Switch + + + +@code { + private bool? SwitchValue { get; set; } + + private const string IndeterminateClass = "switch-indeterminate"; +} +```` + +## See Also + +* [CheckBox Indeterminate State](slug:checkbox-indeterminate-state)