fix(styled checkbox): make one way and two way data binding work

Author: maiieul

apps/website/src/routes/docs/styled/checkbox/examples/data-binding.tsx

@@ -0,0 +1,17 @@
+import { component$, useSignal } from '@builder.io/qwik';
+import { Checkbox, Label } from '~/components/ui';
+
+export default component$(() => {
+  const checkedSig = useSignal(false);
+  return (
+    <div>
+      <div class="flex items-center space-x-2">
+        <Checkbox id="terms" bind:checked={checkedSig} />
+        <div>
+          <Label for="terms">Accept terms and conditions</Label>
+        </div>
+      </div>
+      <p class="text-sm text-muted-foreground">checked: {checkedSig.value.toString()}</p>
+    </div>
+  );
+});

apps/website/src/routes/docs/styled/checkbox/index.mdx

@@ -53,3 +53,7 @@ export const Checkbox = component$<PropsOf<'input'>>(({ name, ...props }) => {
 ### Disabled
 
 <Showcase name="disabled" vertical />
+
+### Data binding
+
+<Showcase name="data-binding" vertical />

packages/kit-styled/src/components/checkbox/checkbox.tsx

@@ -1,17 +1,23 @@
-import { PropsOf, component$ } from '@builder.io/qwik';
+import { $, PropsOf, component$ } from '@builder.io/qwik';
 import { cn } from '@qwik-ui/utils';
 
-export const Checkbox = component$<PropsOf<'input'>>(({ id, name, ...props }) => {
-  const inputId = id || name;
-  return (
-    <input
-      type="checkbox"
-      {...props}
-      class={cn(
-        'peer peer h-4 w-4 shrink-0 border-primary text-primary accent-primary ring-offset-background focus:ring-ring focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
-        props.class,
-      )}
-      id={inputId}
-    />
-  );
-});
+export const Checkbox = component$<PropsOf<'input'>>(
+  ({ id, name, ['bind:checked']: checkedSig, checked, onInput$, ...props }) => {
+    const inputId = id || name;
+    return (
+      <input
+        // workaround to support two way data-binding on the Input component (https://github.com/QwikDev/qwik/issues/3926)
+        checked={checkedSig ? checkedSig.value : checked}
+        onInput$={checkedSig ? $((_, el) => (checkedSig.value = el.checked)) : onInput$}
+        data-checked={checked || checkedSig?.value || ''}
+        type="checkbox"
+        {...props}
+        class={cn(
+          'peer h-4 w-4 shrink-0 border-primary text-primary accent-primary ring-offset-background focus:ring-ring focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+          props.class,
+        )}
+        id={inputId}
+      />
+    );
+  },
+);

packages/kit-styled/src/components/input/input.tsx

@@ -16,7 +16,7 @@ export const Input = component$<InputProps>(
           {...props}
           aria-errormessage={`${inputId}-error`}
           aria-invaid={!!error}
-          // workaround for one way and two way data-binding https://github.com/QwikDev/qwik/issues/3926
+          // workaround to support two way data-binding on the Input component (https://github.com/QwikDev/qwik/issues/3926)
           value={valueSig ? valueSig.value : value}
           onInput$={valueSig ? $((__, el) => (valueSig.value = el.value)) : onInput$}
           ref={inputRef}