Switch

A control that indicates whether a setting is on or off.

Made by imskyleen
Edit on GitHub
Open in

Installation

Usage

<Switch>
  <SwitchIcon position="left" />
  <SwitchIcon position="right" />
  <SwitchThumb>
    <SwitchIcon position="thumb" />
  </SwitchThumb>
</Switch>

API Reference

Switch

Base UI API Reference - Switch.Root
PropTypeDefault
...props?
HTMLMotionProps<"button">
-

The render property is not supported in the Switch component, as it is used for animation.

SwitchThumb

Base UI API Reference - Switch.Thumb
PropTypeDefault
pressedAnimation?
0
-
...props?
HTMLMotionProps<"div">
-

The render property is not supported in the SwitchThumb component, as it is used for animation.

SwitchIcon

PropTypeDefault
position
0
-
...props?
HTMLMotionProps<"div">
-

Credits

Built by Skyleen. The source code is available on GitHub.

Last updated: 10/4/2025