# Appearance

The `Switch` provides a predefined set of appearance options.

Apart from the default vision of the `Switch`, these alternative styling options enable you to configure each individual aspect of the component's appearance.

The current article provides details about how the component changes when the different configurations of its properties are applied. Here are the sections you can directly access:

* [Switch Configurator demo](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/switch/appearance#configurator-demo)
* [Switch Sizes](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/switch/appearance#size)
* [Switch Track Roundness](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/switch/appearance#track-roundness)
* [Switch Thumb Roundness](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/switch/appearance#thumb-roundness)

## Configurator demo

The following example demonstrates configuring different aspects of a `Switch` appearance through a configurator.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/inputs/switch/appearance/configurator/source.txt)

## Size

The size of the `Switch` is controlled through its [`size`](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/api/switchprops#size) property. The values we can pass to the property are as follows:

* `small` — Sets the `padding` to `2px` and `8px`.
* `medium` — Sets the `padding` to `4px` and `8px`.
* `large` — Sets the `padding` to `6px` and `8px`.

The following example demonstrates the usage of each `size` option:

[Demo Source](https://demos.telerik.com/kendo-vue-ui/inputs/switch/appearance/size/source.txt)

## Track roundness

The track roundness of the `Switch` is controlled through its [`trackRounded`](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/api/switchprops#trackrounded) property. The values we can pass to the property are as follows:

* `none` — Sets no `border radius`.
* `small` — Sets the `border radius` to `1px`.
* `medium` — Sets the `border radius` to `2px`.

- `large` — Sets the `border radius` to `4px`.

* `full` — Sets the `border radius` to `9999px`.

The following example demonstrates the usage of each `trackRounded` option:

[Demo Source](https://demos.telerik.com/kendo-vue-ui/inputs/switch/appearance/track-rounded/source.txt)

## Thumb roundness

The thumb roundness of the `Switch` is controlled through its [`thumbRounded`](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/api/switchprops#thumbrounded) property. The values we can pass to the property are as follows:

* `none` — Sets no `border radius`.
* `small` — Sets the `border radius` to `1px`.
* `medium` — Sets the `border radius` to `2px`.

- `large` — Sets the `border radius` to `4px`.

* `full` — Sets the `border radius` to `9999px`.

The following example demonstrates the usage of each `thumbRounded` option:

[Demo Source](https://demos.telerik.com/kendo-vue-ui/inputs/switch/appearance/thumb-rounded/source.txt)

## Suggested Links

* [API Reference of the Switch](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/api/switchprops)
* [Switch `size` options](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/api/switchprops#size)
* [Switch `trackRounded` options](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/api/switchprops#trackrounded)
* [Switch `thumbRounded` options](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/api/switchprops#thumbrounded)
* [Creating Custom Styles with ThemeBuilder](https://www.telerik.com/kendo-vue-ui-develop/components/styling/theme-builder)