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.
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:
smallmedium(Default)largenone—Removes the built-in sizing styles, allowing you to customize thewidthandheight.
The following example demonstrates how to define the size of the Switch.
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 to2px.medium—Sets the border radius of the Switch track to4px.large—Sets the border radius of the Switch track to6px.full(default)—Sets the border radius of the Switch track to9999px.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.
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 to2px.medium—Sets the border radius of the Switch thumb to4px.large—Sets the border radius of the Switch thumb to6px.full(default)—Sets the border radius of the Switch thumb to9999px.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.