New to Kendo UI for Angular? Start a free 30-day trial

Switch Appearance

The Switch provides predefined appearance options such as different sizes, track border radius and thumb border radius.

The following example demonstrates all available appearance options of the Switch in action.

Example
View Source
Change Theme:

Size

The Switch allows you to customize its width and height. To achieve this utilize the size property. It accepts values of type InputSize or none.

The size option supports the following values:

  • small—Sets the width of the Switch to 52px and the height to 26px.
  • medium (default)—Sets the width of the Switch to 60px and the height to 30px.
  • large—Sets the width of the Switch to 68px and the height to 34px.
  • none—The none option removes the built-in sizing of the Switch. Allows for custom width and height.

The following example demonstrates how to define the size of the Switch.

Example
View Source
Change Theme:

Track Roundness

The Switch enables you to apply different border radius to the track of the component through the trackRounded property. It accepts values of type InputRounded or none.

The trackRounded option supports the following values:

  • small—Sets the border radius of the Switch track to 1px.
  • medium—Sets the border radius of the Switch track to 2px.
  • large—Sets the border radius of the Switch track to 4px.
  • full (default)—Sets the border radius of the Switch track to 9999px.
  • none—The none option removes the built-in roundness of the Switch track. Allows for setting custom border radius.

The following example demonstrates how to define the border radius of the track.

Example
View Source
Change Theme:

Thumb Roundness

The Switch enables you to apply different border radius to the thumb of the component through the thumbRounded property. It accepts values of type InputRounded or none.

The thumbRounded option supports the following values:

  • small—Sets the border radius of the Switch thumb to 1px.
  • medium—Sets the border radius of the Switch thumb to 2px.
  • large—Sets the border radius of the Switch thumb to 4px.
  • full(default)—Sets the border radius of the Switch thumb to 9999px.
  • none—The none option removes the built-in roundness of the Switch thumb. Allows for setting custom border radius.

The following example demonstrates how to define the border radius of the thumb.

Example
View Source
Change Theme:

In this article

Not finding the help you need?