Switch

Switches are a pleasant interface for toggling a value between two states, and offer the same semantics and keyboard navigation as native checkbox elements.

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

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

SwitchThumb

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

SwitchIcon

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

Credits

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

Last updated: 10/4/2025