render (h, { props, data, listeners, injections, ...rest }) {
    const colorMode = injections.$chakraColorMode()
    const width = switchSizes[props.size] && switchSizes[props.size].width
    const height = switchSizes[props.size] && switchSizes[props.size].height

    const styleProps = {
      rounded: 'full',
      justifyContent: 'flex-start',
      width,
      height,
      bg: colorMode === 'dark' ? 'whiteAlpha.400' : 'gray.300',
      boxSizing: 'content-box',
      p: '2px',
      _checked: {
        bg: `${props.color}.500`
      },
      _child: {
        transform: 'translateX(0)'
      },
      _checkedAndChild: {
        transform: `translateX(calc(${width} - ${height}))`
      },
      _focus: {
        boxShadow: 'outline'
      },
      _hover: {
        cursor: 'pointer'
      },
      _checkedAndHover: {
        cursor: 'pointer'
      },
      _disabled: {
        opacity: 0.4,
        cursor: 'not-allowed'
      }
    }

    const eventListeners = {
      ...listeners,
      change: (e) => {
        const newValue = !props.isChecked
        emitFunctionalEvent(listeners.change, newValue, e)
      }
    }

    return h(CBox, {
      ...rest,
      props: {
        ...forwardProps(props),
        as: 'label'
      },
      attrs: {
        position: 'relative',
        display: 'inline-block',
        verticalAlign: 'middle',
        ...data.attrs,
        'data-chakra-component': 'CSwitch'
      }
    }, [
      h(CVisuallyHidden, {
        props: {
          as: 'input'
        },
        attrs: {
          type: 'checkbox',
          'aria-label': props.ariaLabel,
          'aria-labelledby': props.ariaLabelledBy,
          id: props.id,
          name: props.name,
          value: props.value,
          'aria-invalid': props.isInvalid,
          defaultChecked: props.defaultIsChecked,
          checked: props.isChecked,
          disabled: props.isDisabled
        },
        on: eventListeners
      }),
      h(CControlBox, {
        attrs: styleProps
      }, [
        h(CBox, {
          attrs: {
            bg: 'white',
            transition: 'transform 250ms',
            rounded: 'full',
            h: height,
            w: height
          }
        })
      ])
    ])
  }
CSwitch component

the switch component that serves as an alternative for checkbox.

@extends CBox
@see Docs https://vue.chakra-ui.com/stat