Switch

Used to capture a binary state

Activate Chakra

import { Switch } from "@/components/ui/switch"

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

Setup

If you don't already have the snippet, run the following command to add the switch snippet

chakra snippet add switch

The snippet includes a closed component composition for the Switch component.

Usage

import { Switch } from "@/components/ui/switch"

<Switch>Label</Switch>

Examples

Sizes

Use the size prop to change the size of the switch component.

import { HStack } from "@chakra-ui/react"
import { Switch } from "@/components/ui/switch"

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

Variants

Use the variant prop to change the visual style of the switch.

import { HStack } from "@chakra-ui/react"
import { Switch } from "@/components/ui/switch"

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

Colors

Use the colorPalette prop to change the color scheme of the component.

import { Stack, Text } from "@chakra-ui/react"
import { colorPalettes } from "compositions/lib/color-palettes"
import { Switch } from "@/components/ui/switch"

const Demo = () => {
  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>
  )
}

Controlled

Use the checked and onCheckedChange prop to control the state of the switch.

"use client"

import { Switch } from "@/components/ui/switch"
import { useState } from "react"

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

Hook Form

Here's an example of integrating the switch with react-hook-form.

"use client"

import { Button, Stack } from "@chakra-ui/react"
import { zodResolver } from "@hookform/resolvers/zod"
import { Field } from "@/components/ui/field"
import { Switch } from "@/components/ui/switch"
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>

const Demo = () => {
  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 invalid={!!errors.active} errorText={errors.active?.message}>
              <Switch
                name={field.name}
                checked={field.value}
                onCheckedChange={({ checked }) => field.onChange(checked)}
                inputProps={{ onBlur: field.onBlur }}
              >
                Activate Chakra
              </Switch>
            </Field>
          )}
        />
        <Button size="sm" type="submit" mt="4">
          Submit
        </Button>
      </Stack>
    </form>
  )
}

Disabled

Use the disabled prop to disable the switch.

Activate Chakra

import { Switch } from "@/components/ui/switch"

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

Invalid

Use the invalid prop to indicate an error state for the switch.

Activate Chakra

import { Switch } from "@/components/ui/switch"

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

Here's an example of a switch with a tooltip.

Switch with tooltip

import { Switch } from "@/components/ui/switch"
import { Tooltip } from "@/components/ui/tooltip"
import { useId } from "react"

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

Track Label

Use the trackLabel prop to display different label based on the checked state.

import { Icon } from "@chakra-ui/react"
import { Switch } from "@/components/ui/switch"
import { FaMoon, FaSun } from "react-icons/fa"

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

Thumb Label

Use the thumbLabel prop to add an icon to the switch thumb.

Switch me

import { Switch } from "@/components/ui/switch"
import { HiCheck, HiX } from "react-icons/hi"

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

Props

Root

Prop	Default	Type
`value`	`'\'on\''`	`string \| number` The value of switch input. Useful for form submission.
`colorPalette`	`'gray'`	`'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink' \| 'accent'` The color palette of the component
`variant`	`'solid'`	`'solid' \| 'raised'` The variant of the component
`size`	`'md'`	`'xs' \| 'sm' \| 'md' \| 'lg'` The size of the component
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.
`checked`		`boolean` Whether the switch is checked.
`disabled`		`boolean` Whether the switch is disabled.
`ids`		`Partial<{ root: string hiddenInput: string control: string label: string thumb: string }>` The ids of the elements in the switch. Useful for composition.
`invalid`		`boolean` If `true`, the switch is marked as invalid.
`label`		`string` Specifies the localized strings that identifies the accessibility elements and their states
`name`		`string` The name of the input field in a switch (Useful for form submission).
`onCheckedChange`		`(details: CheckedChangeDetails) => void` Function to call when the switch is clicked.
`readOnly`		`boolean` Whether the switch is read-only
`required`		`boolean` If `true`, the switch input is marked as required,
`as`		`React.ElementType` The underlying element to render.
`unstyled`		`boolean` Whether to remove the component's style.

Steps

Tabs

Switch

.css-vfo6uh{color:var(--chakra-colors-fg);-webkit-text-decoration:underline;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:var(--chakra-colors-border-emphasized);font-weight:500;}Setup

Setup