104Get started
HextaUI

Switch: Controlled

Pass checked and onCheckedChange.

"use client"

import * as React from "react"

import { Switch } from "@/components/ui/switch"

export function SwitchControlled() {
  const [dark, setDark] = React.useState(false)

  return (
    <label className="flex items-center gap-3 text-sm">
      <Switch checked={dark} onCheckedChange={setDark} />
      Dark mode is {dark ? "on" : "off"}
    </label>
  )
}

Add this example

This adds the example as components/examples/switch/controlled.tsx, together with the Switch component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/switch-controlled.json

To add only the component, follow the Switch installation.

Props in this example

The Switch props this example sets, from the API reference.

Switch

PropTypeDefault
checked
boolean–
onCheckedChangeReturn a promise to show the saving state. On rejection an uncontrolled switch flips back.
(checked, details) => void | Promise–

Every prop is in the Switch API reference.

More Switch examples

See them all, with keyboard support and accessibility notes, on the Switch page.

Related components