Toggle switch alternative to the checkbox.
This component inherits props from the Switch primitive and supports common margin props.
Prop | Type | Default |
---|---|---|
size | Responsive<"1" | "2" | "3"> | "2" |
variant | "classic" | "surface" | "soft" | "surface" |
color | enum | |
highContrast | boolean | |
radius | "none" | "small" | "medium" | "large" | "full" |
Use the size
prop to control the size of the switch.
Use the variant
prop to control the visual style of the switch.
Currently, we recommend using only the surface
variant following the ScaleUI Radix design system.
Use the radius
prop to assign a specific radius value.
Composing Switch
within Text
automatically centers it with the first line of text.
It is automatically well-aligned with multi-line text too.
Use the native disabled
attribute to create a disabled switch.