Checkbox

<Checkbox label="Checkbox" />

<Checkbox.Root>
  <Checkbox.HiddenInput />
  <Checkbox.Label>Label</Checkbox.Label>
  <Checkbox.Control />
</Checkbox.Root>

<Checkbox defaultChecked label="Label" />
<Checkbox label="Label" />
<Checkbox indeterminate label="Label" />

<Checkbox defaultChecked disabled label="Label" />
<Checkbox disabled label="Label" />
<Checkbox disabled indeterminate label="Label" />

import {type ReactElement, useState} from "react"

import {Checkbox} from "@qualcomm-ui/react/checkbox"

export default function CheckboxControlledDemo(): ReactElement {
  const [checked, setChecked] = useState<boolean>(false)

  return (
    <Checkbox.Root
      checked={checked}
      onCheckedChange={(nextState) => {
        console.log("checkbox state change:", nextState)
        setChecked(nextState)
      }}
    >
      <Checkbox.HiddenInput />
      <Checkbox.Control />
      <Checkbox.Label>Label</Checkbox.Label>
    </Checkbox.Root>
  )
}

import type {ReactElement} from "react"

import {Checkbox} from "@qualcomm-ui/react/checkbox"

export default function CheckboxSizesDemo(): ReactElement {
  return (
    <div className="flex flex-col items-start gap-4">
      <Checkbox label="Small (sm)" size="sm" />
      <Checkbox label="Medium (md)" size="md" />
      <Checkbox label="Large (lg)" size="lg" />
    </div>
  )
}

import type {ReactElement} from "react"

import {arktypeResolver} from "@hookform/resolvers/arktype"
import {type} from "arktype"
import {Controller, useForm} from "react-hook-form"

import {Button} from "@qualcomm-ui/react/button"
import {Checkbox} from "@qualcomm-ui/react/checkbox"

interface FormData {
  acceptTerms: boolean
  newsletter: boolean
}

const acceptTermsSchema = type("boolean")
  .narrow((value: boolean) => value === true)
  .configure({
    message: "Please accept the Terms of Service to continue",
  })
const FormSchema = type({
  // must be true
  acceptTerms: acceptTermsSchema,
  // can be true or false
  newsletter: "boolean",
})

export default function CheckboxReactHookFormDemo(): ReactElement {
  const {control, handleSubmit} = useForm<FormData>({
    defaultValues: {
      acceptTerms: false,
      newsletter: true,
    },
    resolver: arktypeResolver(FormSchema),
  })

  return (
    <form
      className="flex w-56 flex-col gap-2"
      onSubmit={(e) => {
        void handleSubmit((data) => console.log(data))(e)
      }}
    >
      <Controller
        control={control}
        name="newsletter"
        render={({field: {name, onChange, value, ...fieldProps}}) => {
          return (
            <Checkbox.Root
              checked={value}
              name={name}
              onCheckedChange={onChange}
              {...fieldProps}
            >
              <Checkbox.HiddenInput />
              <Checkbox.Control />
              <Checkbox.Label>Subscribe to our Newsletter</Checkbox.Label>
            </Checkbox.Root>
          )
        }}
      />

      <Controller
        control={control}
        name="acceptTerms"
        render={({
          field: {onChange, value, ...fieldProps},
          fieldState: {error},
        }) => {
          return (
            <Checkbox.Root
              checked={value}
              invalid={!!error?.message}
              onCheckedChange={onChange}
              {...fieldProps}
            >
              <Checkbox.HiddenInput />
              <Checkbox.Control />
              <Checkbox.Label>Accept Terms of Service</Checkbox.Label>
              <Checkbox.ErrorText>{error?.message}</Checkbox.ErrorText>
            </Checkbox.Root>
          )
        }}
      />

      <Button
        className="mt-1"
        emphasis="primary"
        size="sm"
        type="submit"
        variant="fill"
      >
        Submit
      </Button>
    </form>
  )
}

import type {ReactElement} from "react"

import {useForm} from "@tanstack/react-form"

import {Button} from "@qualcomm-ui/react/button"
import {Checkbox} from "@qualcomm-ui/react/checkbox"

interface FormData {
  acceptTerms: boolean
  newsletter: boolean
}

const defaultFormData: FormData = {
  acceptTerms: false,
  newsletter: true,
}

const errorMessage = "Please accept the Terms of Service to continue"

export default function CheckboxTanstackFormDemo(): ReactElement {
  const form = useForm({
    defaultValues: defaultFormData,
    onSubmit: async ({value}) => {
      // Do something with form data
      console.log(value)
    },
  })

  return (
    <form
      className="flex w-56 flex-col gap-2"
      onSubmit={(event) => {
        event.preventDefault()
        event.stopPropagation()
        void form.handleSubmit()
      }}
    >
      <form.Field name="newsletter">
        {({handleChange, name, state}) => {
          return (
            <Checkbox
              checked={state.value}
              label="Subscribe to our Newsletter"
              name={name}
              onCheckedChange={handleChange}
            />
          )
        }}
      </form.Field>

      <form.Field
        name="acceptTerms"
        validators={{
          onChange: (field) => (field.value ? undefined : errorMessage),
          onSubmit: (field) => (field.value ? undefined : errorMessage),
        }}
      >
        {({handleChange, name, state}) => {
          const fieldError =
            state.meta.errorMap["onChange"] || state.meta.errorMap["onSubmit"]
          return (
            <Checkbox
              checked={state.value}
              errorText={fieldError}
              invalid={!!fieldError}
              label="Accept Terms"
              name={name}
              onCheckedChange={handleChange}
            />
          )
        }}
      </form.Field>

      <Button
        className="mt-1"
        emphasis="primary"
        size="sm"
        type="submit"
        variant="fill"
      >
        Submit
      </Button>
    </form>
  )
}