Switch Appearance

As of the R1 2022 release, the Switch has new rendering and styling options.

In this article, you will find information about the new appearance of the Telerik UI for ASP.NET Core Switch.

For additional information regarding the decision behind these changes, visit the Components Rendering article.

For a complete example, visit the Appearance Demo of the Switch.

Options

The Switch HtmlHelper provides the following styling options:

• Size()—configures the overall size of the component.
• TrackRounded()—defines the radius of the track's border.
• ThumbRounded()—sets the radius of the thumb's border.

Size

The Size() method allows you to adjust the size of the Switch. The default size is Medium.

@(Html.Kendo().Switch()
    .Name("switch")
    .Size(ComponentSize.Medium)
    .Messages(c => c.Checked("YES").Unchecked("NO"))
)

<kendo-switch name="switch" size="ComponentSize.Medium">
    <messages checked="YES" unchecked="NO"/>
</kendo-switch>

The option adds a class k-switch-md to the span.k-switch element:

<span class="k-switch k-switch-on k-switch-md">
</span>

The following values are available for the Size option:

• Small
• Medium
• Large
• None

TrackRounded

You can control how much border radius is applied to the component's track by using the TrackRounded() method. The default value is Full.

The example below demonstrates how to set the TrackRounded option:

@(Html.Kendo().Switch()
    .Name("switch")
    .TrackRounded(Rounded.Full)
)

<kendo-switch name="switch" track-rounded="Rounded.Full"></kendo-switch>

The option adds a class k-rounded-full to the span.k-switch-track element that wraps the On/Off labels:

<span class="k-switch-track k-rounded-full">
</span>

The TrackRounded option supports the following values:

• Small
• Medium
• Large
• Full
• None

ThumbRounded

The ThumbRounded() method controls how much border radius is applied to thumb of the Switch.

@(Html.Kendo().Switch()
    .Name("switch")
    .ThumbRounded(Rounded.Full)
)

<kendo-switch name="switch" thumb-rounded="Rounded.Full"></kendo-switch>

The option adds a class k-rounded-full to the span.k-switch-thumb element for the Switch handle:

<span class="k-switch-thumb k-rounded-full">
</span>

The ThumbRounded option supports the following values:

• Small
• Medium
• Large
• Full—the default value
• None

Old vs New Rendering

The old rendering of the component consisted of a span element with classes named k-switch k-widget k-switch-on. The span element contained the wrapper for the Switch labels and handle.

 <span class="k-switch k-widget k-switch-on">
    <span class="k-switch-container">
        <span class="k-switch-label-on">On</span>
        <span class="k-switch-label-off">Off</span>
        <span class="k-switch-handle"></span>
    </span>
</span>

The new rendering of the component includes separate wrapping span elements for the labels and the handle.

• The labels are placed in a span element with classes k-switch-track k-rounded-full:

<span class="k-switch-track k-rounded-full">
    <span class="k-switch-label-on">On</span>
    <span class="k-switch-label-off">Off</span>
</span>

• The handle is rendered in a span element with classes k-switch-thumb-wrap:

<span class="k-switch-thumb-wrap">
    <span class="k-switch-thumb k-rounded-full"></span>
</span>

The full rendering of the component has the following HTML structure:

<span class="k-switch k-switch-on k-switch-md k-rounded-full">
    <span class="k-switch-track k-rounded-full">
        <span class="k-switch-label-on">On</span>
        <span class="k-switch-label-off">Off</span>
    </span>
    <span class="k-switch-thumb-wrap">
        <span class="k-switch-thumb k-rounded-full"></span>
    </span>
</span>

Visual Backwards Compatibility

To achieve the same look and feel as the old rendering, the references of the element must be updated. Visit the CSS Classes Migration and JQuery Selectors Migration sections of the Components Rendering article for additional information.

The following example showcases how to customize the styles of the Switch in both the new, and the old rendering:

     <style>
      /*  NEW RENDERING */
      /*  The style below will works with versions R1 2022 and later */
      .k-switch .k-switch-thumb{
        border-color: blue !important;
        background-color: pink !important;
        border-width: 3px !important;
      }
      .k-switch .k-switch-track{
        border: 2px solid orange !important;
      }
        /*  OLD RENDERING */
        /*  The style below will works with versions prior to R1 2022 */
      .k-switch .k-switch-handle{
        border-color: green !important;
        background-color: purple !important;
      }
      .k-switch .k-switch-container{
        border: 2px solid green !important;
      }
    </style>

The new styling and rendering supports only the default options when a LESS theme is used.

See Also

• Appearance of the Switch HtmlHelper for ASP.NET Core (Demo)
• Switch Server-Side API
• Switch Client-Side API