Can't get the checkbox component to work

[kaumac]

Hey there! I can't seem to get the Checkbox component to work...

I have my Checkbox component like this:

import { Checkbox as ArkCheckbox } from '@ark-ui/react'

import { styled } from '@/styled/jsx'
import { checkbox } from '@/styled/recipes'

import { createStyleContext } from '../utils/createStyleContext'

const { withProvider, withContext } = createStyleContext(checkbox)

export const CheckboxRoot = withProvider(styled(ArkCheckbox.Root), 'root')
export const CheckboxControl = withContext(styled(ArkCheckbox.Control), 'control')
export const CheckboxIndicator = withContext(styled(ArkCheckbox.Indicator), 'indicator')
export const CheckboxLabel = withContext(styled(ArkCheckbox.Label), 'label')

export const Checkbox = Object.assign(CheckboxRoot, {
  Root: CheckboxRoot,
  Control: CheckboxControl,
  Indicator: CheckboxIndicator,
  Label: CheckboxLabel
})

export type CheckboxProps = typeof CheckboxRoot
export type CheckboxControlProps = typeof CheckboxControl
export type CheckboxIndicatorProps = typeof CheckboxIndicator
export type CheckboxLabelProps = typeof CheckboxLabel

When I try to render just it doesn't render anything.
Then when I try to render Checkbox.Root I get an error. Here's the usage:

<Checkbox.Root defaultChecked>
            <Checkbox.Control>
              <CheckIcon />
            </Checkbox.Control>
            <Checkbox.Label>Label</Checkbox.Label>
          </Checkbox.Root>

      Here is the error:

[cschroeter]

@kaumac

Thanks for bringing this up. Unfortunately I can not really see an issue right away. You may want to add a use client on top of the file. Feel free to create a Codesandbox using the Next.js Starter https://stackblitz.com/github/cschroeter/park-ui/tree/main/examples/panda/react/next-js

[kaumac]

Thanks for the quick reply @cschroeter !

I have created the codesandbox. As you'll be able to see on the first "Checkbox" tab, just rendering <Checkbox defaultChecked /> results in just an empty .

I have 'use client' on top of my Checkbox component, which I believe should be enough. But for whatever reason I also had to add it to my Page component. Then with the extra 'use client' and using the more verbose <Checkbox.Root> implementation it worked. (The simple implementation didn't work even with the extra 'use client')

Is there a way we can use the Checkbox without "use client"? Or is that a technical limitation?

Here is the code sandbox:
https://stackblitz.com/edit/github-e41h5b?file=src%2Fapp%2Fpage.tsx

[cschroeter]

I think this is related to this issue: vercel/next.js#51593

This somewhat works: https://stackblitz.com/edit/github-e41h5b-sogxzd?file=src%2Fapp%2Fpage.tsx,src%2Fcomponents%2Fui%2Findex.ts,src%2Fcomponents%2Fui%2Fcheckbox.tsx