Animate UI

Switch

A control that allows the user to toggle between checked and not checked.

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

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

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

SwitchThumb

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

The asChild 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.