Switch

<Switch>Basic</Switch>

<HStack>
  <For each={["thick", "thin"]}>
    {(variant) => (
      <Switch key={variant} variant={variant}>
        {toTitleCase(variant)}
      </Switch>
    )}
  </For>
</HStack>

<HStack>
  <For each={["sm", "md", "lg"]}>
    {(size) => (
      <Switch key={size} size={size}>
        Size ({size})
      </Switch>
    )}
  </For>
</HStack>

<HStack>
  <For each={["success", "warning"]}>
    {(colorScheme) => (
      <Switch key={colorScheme} colorScheme={colorScheme} defaultChecked>
        {toTitleCase(colorScheme)}
      </Switch>
    )}
  </For>
</HStack>

<Switch reverse>Reverse Label</Switch>

<VStack>
  <For each={["square", "rounded", "circle"]}>
    {(shape) => (
      <Switch key={shape} shape={shape} defaultChecked>
        {toTitleCase(shape)}
      </Switch>
    )}
  </For>
</VStack>

<HStack>
  <Switch disabled>Disabled</Switch>
  <Switch disabled defaultChecked>
    Disabled
  </Switch>
</HStack>

<HStack>
  <Switch readOnly>Read Only</Switch>
  <Switch readOnly defaultChecked>
    Read Only
  </Switch>
</HStack>

<Switch
  size="lg"
  icon={{ off: <MoonIcon fontSize="sm" />, on: <SunIcon fontSize="sm" /> }}
>
  Dark Mode
</Switch>

const id = useId()

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

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

return (
  <Switch checked={checked} onChange={toggle}>
    Custom Control
  </Switch>
)