# Appearance

In this article, you will find information about the styling options and rendering of the Telerik UI for ASP.NET Core Switch.

For a complete example, visit the [Appearance Demo of the Switch](https://demos.telerik.com/aspnet-core/switch/appearance).

## Options

The Switch HtmlHelper provides the following styling options:

* [`Size()`](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/switch/appearance#size)—configures the overall size of the component.
* [`TrackRounded()`](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/switch/appearance#trackrounded)—defines the radius of the track's border.
* [`ThumbRounded()`](https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/switch/appearance#thumbrounded)—sets the radius of the thumb's border.

### Size

The `Size()` method allows you to adjust the size of the Switch.

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

```Razor TagHelper
<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:

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

The following values are available for the `Size` option:

* `Small`
* `Medium`
* `Large`

> When not explicitly set, the applied theme controls the default size.

> The `None` value is deprecated. Use custom CSS instead.

### 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:

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

```Razor TagHelper
<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:

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

The `TrackRounded` option supports the following values:

* `Small`
* `Medium`
* `Large`
* `Full`

> When not explicitly set, the applied theme controls the default border radius.

> The `None` value is deprecated. Use custom CSS instead.

### ThumbRounded

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

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

```Razor TagHelper
<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:

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

The `ThumbRounded` option supports the following values:

* `Small`
* `Medium`
* `Large`
* `Full`—the default value
* `None`

## Rendering

Starting with version R1 2022, the component has a new rendering. For additional information on the decision behind these changes, visit the [Components Rendering Overview](https://www.telerik.com/aspnet-core-ui/documentation/styles-and-layout/components-rendering-overview) article.

To review the latest rendering of the component, refer to the HTML specifications in the [Kendo UI Themes Monorepo](https://github.com/telerik/kendo-themes/tree/develop). The `tests` folder of the repository contains the rendering for all flavors of the components, providing a clear reference for how their elements are structured. The rendering information can help you customize a component's appearance and behavior by applying custom CSS or JavaScript to suit specific design or functional requirements.

## Custom Layout

You can implement a custom layout for the Switch by using the available [Sass variables](https://www.telerik.com/design-system/docs/components/switch/styles/).

## See Also

* [Components Appearance Overview](https://www.telerik.com/aspnet-core-ui/documentation/styles-and-layout/components-rendering-overview)
* [Appearance of the Switch HtmlHelper for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/switch/appearance)
* [Switch Server-Side API](https://www.telerik.com/aspnet-core-ui/documentation/api/switch)
* [Switch Client-Side API](https://docs.telerik.com/kendo-ui/api/ui/switch)