diff --git a/docs/components/switch.md b/docs/components/switch.md
index f919a874..53db541b 100644
--- a/docs/components/switch.md
+++ b/docs/components/switch.md
@@ -5,7 +5,7 @@
Switches allow the user to toggle an option on or off.
```html preview
-Switch
+Switch
```
?> This component doesn't work with standard forms. Use [``](/components/form.md) instead.
@@ -28,5 +28,12 @@ Use the `disabled` attribute to disable the switch.
Disabled
```
+### Custom Size
+
+Use the available custom properties to make the switch a different size.
+
+```html preview
+
+```
[component-metadata:sl-switch]
diff --git a/src/components/switch/switch.scss b/src/components/switch/switch.scss
index f54c16f4..64f657a5 100644
--- a/src/components/switch/switch.scss
+++ b/src/components/switch/switch.scss
@@ -1,9 +1,13 @@
@import 'component';
+/**
+ * @prop --width: The width of the switch.
+ * @prop --height: The height of the switch.
+ * @prop --thumb-size: The size of the thumb.
+ */
:host {
--height: var(--sl-toggle-size);
--thumb-size: calc(var(--sl-toggle-size) + 4px);
- --track-border-radius: var(--height);
--width: calc(var(--height) * 2);
display: inline-block;
@@ -12,7 +16,6 @@
.switch {
display: inline-flex;
align-items: center;
- width: var(--width);
font-family: var(--sl-input-font-family);
font-size: var(--sl-input-font-size-medium);
font-weight: var(--sl-input-font-weight);
@@ -30,7 +33,7 @@
height: var(--height);
background-color: var(--sl-color-gray-80);
border: solid var(--sl-input-border-width) var(--sl-color-gray-80);
- border-radius: var(--track-border-radius);
+ border-radius: var(--height);
transition: var(--sl-transition-fast) border-color, var(--sl-transition-fast) background-color;
.switch__thumb {