Checkbox

1import { Checkbox as KobalteCheckbox } from "@kobalte/core/checkbox";
2import { Check } from "lucide-solid";
3import type { Component, ComponentProps } from "solid-js";
4import { splitProps } from "solid-js";
5import { cn } from "~/lib/utils";
6 
7export type CheckboxProps = ComponentProps<typeof KobalteCheckbox> & {
8  label?: string;
9  class?: string;
10};
11 
12export const Checkbox: Component<CheckboxProps> = (props) => {
13  const [local, rest] = splitProps(props, ["class", "label"]);
14 
15  return (
16    <KobalteCheckbox class={cn("flex items-center gap-2", local.class)} {...rest}>
17      <KobalteCheckbox.Input class="sr-only" />
18      <KobalteCheckbox.Control
19        class={cn(
20          "peer h-4 w-4 shrink-0 rounded-sm border border-primary",
21          "ring-offset-background focus-visible:outline-none focus-visible:ring-2",
22          "focus-visible:ring-ring focus-visible:ring-offset-2",
23          "disabled:cursor-not-allowed disabled:opacity-50",
24          "data-[checked]:bg-primary data-[checked]:text-primary-foreground",
25        )}
26      >
27        <KobalteCheckbox.Indicator class="flex items-center justify-center text-current">
28          <Check class="h-3.5 w-3.5" />
29        </KobalteCheckbox.Indicator>
30      </KobalteCheckbox.Control>
31      {local.label && (
32        <KobalteCheckbox.Label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
33          {local.label}
34        </KobalteCheckbox.Label>
35      )}
36    </KobalteCheckbox>
37  );
38};