1. Docs
  2. components
  3. Switch

Switch

A control that allows the user to toggle between on and off.

Installation

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage

Single import

import { Switch } from "~/components/ui/switch";
<Switch.Root>
  <Switch.Track>
    <Switch.Thumb />
  </Switch.Track>
</Switch.Root>

Multiple imports

import { SwitchRoot, SwitchTrack, SwitchThumb } from "~/components/ui/switch";
<SwitchRoot>
  <SwitchTrack>
    <SwitchThumb />
  </SwitchTrack>
</SwitchRoot>

API Reference

Root

PropTypeDefault
defaultSelected
boolean
false
isSelected
boolean
false
onChange
function