Switch

On/off toggle built on React Aria's Switch. Reach for it when a setting applies immediately; use a Checkbox when the value is submitted with a form.

import { Switch } from "@pockets-ui/components"

States

Off

Code

import { Switch } from "@pockets-ui/components"

export default function SwitchStates() {
  return (
    <>
      <Switch>Off</Switch>
      <Switch defaultSelected>On</Switch>
    </>
  )
}

Controlled

Pass isSelected with onChange to own the value. Omit both — or use defaultSelected — and the switch manages its own state.

Notifications on

Code

import { Switch } from "@pockets-ui/components"
import { useState } from "react"

export default function SwitchControlled() {
  const [notifications, setNotifications] = useState(true)

  return (
    <Switch isSelected={notifications} onChange={setNotifications}>
      Notifications {notifications ? "on" : "off"}
    </Switch>
  )
}

Disabled

Disabled & on

Code

import { Switch } from "@pockets-ui/components"

export default function SwitchDisabled() {
  return (
    <>
      <Switch isDisabled>Disabled</Switch>
      <Switch isDisabled defaultSelected>
        Disabled &amp; on
      </Switch>
    </>
  )
}