Checkbox

import { component$, useSignal } from "@builder.io/qwik";
import { Checkbox, CheckboxCheckIcon } from "~/components/ui/base/checkbox";

export default component$(() => {
  const checked = useSignal(false);
  return (
    <div class="flex items-center gap-2">
      <Checkbox.Root bind:checked={checked} aria-labelledby="demo-cb-compound-label">
        <Checkbox.Indicator>
          <CheckboxCheckIcon />
        </Checkbox.Indicator>
      </Checkbox.Root>
      <span id="demo-cb-compound-label" class="text-sm text-muted-foreground">
        State: {checked.value ? "selected" : "not selected"}
      </span>
    </div>
  );
});

import { component$, useSignal } from "@builder.io/qwik";
import { CheckboxControl } from "~/components/ui/base/checkbox";

export default component$(() => {
  const ok = useSignal(false);
  return (
    <div class="flex items-center gap-2">
      <CheckboxControl bind:checked={ok} aria-label="I agree" />
      <span class="text-sm text-muted-foreground">
        State: {ok.value ? "selected" : "not selected"}
      </span>
    </div>
  );
});

import { component$, useSignal } from "@builder.io/qwik";
import { CheckboxField } from "~/components/ui/base/checkbox";

export default component$(() => {
  const accepted = useSignal(false);
  return (
    <CheckboxField bind:checked={accepted} label="I agree to the terms" />
  );
});

import { $, component$, useSignal } from "@builder.io/qwik";
import { CheckboxControl } from "~/components/ui/base/checkbox";
import { Label } from "~/components/ui/base/label";

export default component$(() => {
  const v = useSignal(false);
  const id = "my-cb";
  const lid = "my-cb-lbl";
  return (
    <div class="flex items-center gap-2">
      <CheckboxControl bind:checked={v} id={id} aria-labelledby={lid} />
      <Label id={lid} class="cursor-pointer" onClick$={$(() => { v.value = !v.value; })}>
        Custom text
      </Label>
    </div>
  );
});