Switch

<Switch>basic</Switch>

<Wrap gap="md">
  <Switch variant="thick">thick</Switch>
  <Switch variant="thin">thin</Switch>
</Wrap>

<Wrap gap="md">
  <Switch size="sm">small size</Switch>
  <Switch size="md">medium size</Switch>
  <Switch size="lg">large size</Switch>
</Wrap>

<Wrap gap="md">
  <Switch colorScheme="secondary" defaultIsChecked>
    Secondary
  </Switch>
  <Switch colorScheme="green" defaultIsChecked>
    Green
  </Switch>
</Wrap>

<Switch isReverse>basic</Switch>

<Wrap gap="md">
  <Switch isDisabled>disabled</Switch>
  <Switch isDisabled defaultIsChecked>
    disabled
  </Switch>
</Wrap>

<Wrap gap="md">
  <Switch isReadOnly>read only</Switch>
  <Switch isReadOnly defaultIsChecked>
    read only
  </Switch>
</Wrap>

const id = useId()

return (
  <HStack gap="sm">
    <Label htmlFor={id} userSelect="none">
      Please Click
    </Label>
    <Switch id={id} />
  </HStack>
)

const [isChecked, { toggle }] = useBoolean(false)

return (
  <Switch isChecked={isChecked} onChange={toggle}>
    custom control
  </Switch>
)

type Data = { switch: boolean }

const { control, handleSubmit, watch } = useForm<Data>()

const onSubmit: SubmitHandler<Data> = (data) => console.log("submit:", data)

console.log("watch:", watch())

return (
  <VStack as="form" onSubmit={handleSubmit(onSubmit)}>
    <Controller
      name="switch"
      control={control}
      render={({ field: { value, ...rest } }) => (
        <Switch isChecked={value} {...rest}>
          Dark mode
        </Switch>
      )}
    />

    <Button type="submit" alignSelf="flex-end">
      Submit
    </Button>
  </VStack>
)