Checkbox

import { useState } from 'react'
import { Checkbox } from '@canarist/ui'

function Example() {
  const [checked, setChecked] = useState(false)
  return (
    <Checkbox
      label="Enable notifications"
      description="Receive email alerts for matching events."
      checked={checked}
      onChange={(e) => setChecked(e.target.checked)}
    />
  )
}

function NotificationPrefs() {
  const [values, setValues] = useState({ email: true, sms: false })
  return (
    <>
      <Checkbox
        label="Email"
        checked={values.email}
        onChange={(e) => setValues((v) => ({ ...v, email: e.target.checked }))}
      />
      <Checkbox
        label="SMS"
        checked={values.sms}
        onChange={(e) => setValues((v) => ({ ...v, sms: e.target.checked }))}
      />
    </>
  )
}

<Checkbox label="Disabled option" checked disabled />