Switch

'use client'

import { Switch } from '@saas-ui/react'

export const SwitchBasic = () => {
  return <Switch>Activate Chakra</Switch>
}

'use client'

import { HStack } from '@saas-ui/react'
import { Switch } from '@saas-ui/react'

export const SwitchWithSizes = () => {
  return (
    <HStack gap="8">
      <Switch size="xs" />
      <Switch size="sm" />
      <Switch size="md" />
      <Switch size="lg" />
    </HStack>
  )
}

'use client'

import { HStack } from '@saas-ui/react'
import { Switch } from '@saas-ui/react'

export const SwitchWithVariants = () => {
  return (
    <HStack gap="8">
      <Switch variant="raised" />
      <Switch variant="solid" />
    </HStack>
  )
}

'use client'

import { Stack, Text } from '@saas-ui/react'
import { Switch } from '@saas-ui/react'

import { colorPalettes } from '../lib/color-palettes'

export const SwitchWithColors = () => {
  return (
    <Stack gap="2" align="flex-start">
      {colorPalettes.map((colorPalette) => (
        <Stack
          align="center"
          key={colorPalette}
          direction="row"
          gap="10"
          px="4"
        >
          <Text minW="8ch">{colorPalette}</Text>
          <Switch colorPalette={colorPalette} />
          <Switch colorPalette={colorPalette} defaultChecked />
        </Stack>
      ))}
    </Stack>
  )
}

'use client'

import { useState } from 'react'

import { Switch } from '@saas-ui/react'

export const SwitchControlled = () => {
  const [checked, setChecked] = useState(false)
  return (
    <Switch checked={checked} onCheckedChange={(e) => setChecked(e.checked)} />
  )
}

'use client'

import { zodResolver } from '@hookform/resolvers/zod'
import { Button, Stack } from '@saas-ui/react'
import { Field, Switch } from '@saas-ui/react'
import { Controller, useForm } from 'react-hook-form'
import { z } from 'zod'

const formSchema = z.object({
  active: z.boolean({ message: 'Active is required' }),
})

type FormData = z.infer<typeof formSchema>

export const SwitchWithHookForm = () => {
  const {
    handleSubmit,
    control,
    formState: { errors },
  } = useForm<FormData>({
    resolver: zodResolver(formSchema),
  })

  return (
    <form onSubmit={handleSubmit((data) => console.log(data))}>
      <Stack align="flex-start">
        <Controller
          name="active"
          control={control}
          render={({ field }) => (
            <Field.Root invalid={!!errors.active}>
              <Field.Label>Active</Field.Label>
              <Switch
                name={field.name}
                checked={field.value}
                onCheckedChange={({ checked }) => field.onChange(checked)}
                inputProps={{ onBlur: field.onBlur }}
              >
                Activate Chakra
              </Switch>
              <Field.ErrorText>{errors.active?.message}</Field.ErrorText>
            </Field.Root>
          )}
        />
        <Button size="sm" type="submit" mt="4">
          Submit
        </Button>
      </Stack>
    </form>
  )
}

'use client'

import { Switch } from '@saas-ui/react'

export const SwitchWithDisabled = () => {
  return <Switch disabled>Activate Chakra</Switch>
}

'use client'

import { Switch } from '@saas-ui/react'

export const SwitchWithInvalid = () => {
  return <Switch invalid>Activate Chakra</Switch>
}

'use client'

import { useId } from 'react'

import { Switch, Tooltip } from '@saas-ui/react'

export const SwitchWithTooltip = () => {
  const id = useId()
  return (
    <Tooltip ids={{ trigger: id }} content="This is a tooltip">
      <Switch ids={{ root: id }}>Switch with tooltip </Switch>
    </Tooltip>
  )
}

'use client'

import { Icon } from '@saas-ui/react'
import { Switch } from '@saas-ui/react'
import { FaMoon, FaSun } from 'react-icons/fa'

export const SwitchWithTrackLabel = () => {
  return (
    <Switch
      colorPalette="blue"
      size="lg"
      trackLabel={{
        on: (
          <Icon color="yellow.400">
            <FaSun />
          </Icon>
        ),
        off: (
          <Icon color="gray.400">
            <FaMoon />
          </Icon>
        ),
      }}
    />
  )
}

'use client'

import { Switch } from '@saas-ui/react'
import { HiCheck, HiX } from 'react-icons/hi'

export const SwitchWithThumbLabel = () => {
  return (
    <Switch size="lg" thumbLabel={{ on: <HiCheck />, off: <HiX /> }}>
      Switch me
    </Switch>
  )
}