Switch

A Switch is a checkbox drawn as a track and a knob, with role="switch". Use it for a setting that takes effect at once. Use a checkbox for a choice that a form submits later.

Email notificationsPush notifications (needs the app)Emails are on.

SwitchDemo.tsx

import { Text, View } from '@hozo/core'
import { Switch } from '@hozo/ui'
import { useState } from 'react'

export function SwitchDemo() {
  const [emails, setEmails] = useState(true)
  return (
    <View className="gap-3">
      <Switch checked={emails} onCheckedChange={setEmails}>
        Email notifications
      </Switch>
      <Switch disabled>Push notifications (needs the app)</Switch>
      <Text className="text-sm text-hozo-text-muted">Emails are {emails ? 'on' : 'off'}.</Text>
    </View>
  )
}

• checked and onCheckedChange: true or false. A switch has no mixed state, so it draws none.
• defaultChecked: for an uncontrolled switch.
• disabled: the knob stays where it is, and the switch drops out of the tab order.
• The children are the label, and pressing the label flips the switch.