Switch

A control that allows users to toggle between checked and not checked states.

radix-ui.com

Basic

Default

<Switch defaultChecked={true} />

Blue

<Switch variant="blue" defaultChecked={true} />

States

Default

<Switch />

Checked

<Switch defaultChecked={true} />

Disabled

<Switch disabled={true} />

Disabled & Checked

<Switch disabled={true} defaultChecked={true} />

Usage

Controlled Switch

<div className="flex items-center space-x-4">
  <Switch checked={false} onCheckedChange={() => {}} />
  <label className="text-sm font-medium">
    Disabled
  </label>
</div>