Checkbox

1<script lang="ts">
2import { cn } from "@/lib/utils";
3import { Checkbox as CheckboxPrimitive } from "@sprawlify/svelte/checkbox";
4import type { ComponentProps } from "svelte";
5
6interface Props extends ComponentProps<typeof CheckboxPrimitive.Control> {}
7
8let { class: className, children, ...rest }: Props = $props();
9</script>
10
11<CheckboxPrimitive.Control
12  data-slot="checkbox-control"
13  class={cn(
14    "bg-input/30 inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors group-has-disabled/field:opacity-50 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary",
15    className
16  )}
17  {...rest}
18>
19  {@render children?.()}
20</CheckboxPrimitive.Control>

1<script lang="ts">
2import { cn } from "@/lib/utils";
3import { Checkbox as CheckboxPrimitive } from "@sprawlify/svelte/checkbox";
4import { CheckIcon } from "lucide-svelte";
5import type { ComponentProps, Snippet } from "svelte";
6
7interface Props extends ComponentProps<typeof CheckboxPrimitive.Indicator> {
8  children?: Snippet;
9}
10
11let { class: className, children, ...rest }: Props = $props();
12</script>
13
14<CheckboxPrimitive.Indicator
15  data-slot="checkbox-indicator"
16  class={cn("[&>svg]:size-3.5", className)}
17  {...rest}
18>
19  {#if children}
20    {@render children()}
21  {:else}
22    <CheckIcon />
23  {/if}
24</CheckboxPrimitive.Indicator>

1<script lang="ts">
2import { cn } from "@/lib/utils";
3import { Checkbox as CheckboxPrimitive } from "@sprawlify/svelte/checkbox";
4import type { ComponentProps, Snippet } from "svelte";
5
6interface Props extends ComponentProps<typeof CheckboxPrimitive.Label> {
7  children?: Snippet;
8}
9
10let { class: className, children, ...rest }: Props = $props();
11</script>
12
13<CheckboxPrimitive.Label
14  data-slot="checkbox-label"
15  class={cn(
16    "text-sm leading-none font-medium select-none peer-disabled:opacity-50",
17    className
18  )}
19  {...rest}
20>
21  {@render children?.()}
22</CheckboxPrimitive.Label>

1<script lang="ts">
2import { cn } from "@/lib/utils";
3import { Checkbox as CheckboxPrimitive } from "@sprawlify/svelte/checkbox";
4import type { ComponentProps, Snippet } from "svelte";
5
6interface Props extends ComponentProps<typeof CheckboxPrimitive.Root> {
7  children?: Snippet;
8}
9
10let { class: className, children, ...rest }: Props = $props();
11</script>
12
13<CheckboxPrimitive.Root
14  data-slot="checkbox"
15  class={cn(
16    "group/checkbox inline-flex items-center gap-2 data-[disabled]:opacity-50",
17    className
18  )}
19  {...rest}
20>
21  {@render children?.()}
22</CheckboxPrimitive.Root>

1<script lang="ts">
2import { cn } from "@/lib/utils";
3import { Checkbox as CheckboxPrimitive } from "@sprawlify/svelte/checkbox";
4import { Check, Minus } from "lucide-svelte";
5import type { ComponentProps } from "svelte";
6
7interface Props extends ComponentProps<typeof CheckboxPrimitive.Root> {}
8
9let { class: className, children, ...rest }: Props = $props();
10</script>
11
12<CheckboxPrimitive.Root
13  data-slot="checkbox"
14  class={cn(
15    "group/checkbox inline-flex items-center gap-2 data-[disabled]:opacity-50",
16    className
17  )}
18  {...rest}
19>
20  <CheckboxPrimitive.Control
21    data-slot="checkbox-control"
22    class="bg-input/30 inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors group-has-disabled/field:opacity-50 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary"
23  >
24    <CheckboxPrimitive.Indicator
25      data-slot="checkbox-indicator"
26      class="[&>svg]:size-3.5"
27    >
28      <Check />
29    </CheckboxPrimitive.Indicator>
30    <CheckboxPrimitive.Indicator
31      data-slot="checkbox-indicator"
32      class="[&>svg]:size-3.5"
33      indeterminate
34    >
35      <Minus />
36    </CheckboxPrimitive.Indicator>
37  </CheckboxPrimitive.Control>
38  {#if children}
39    <CheckboxPrimitive.Label
40      data-slot="checkbox-label"
41      class="text-sm leading-none font-medium select-none peer-disabled:opacity-50"
42    >
43      {@render children()}
44    </CheckboxPrimitive.Label>
45  {/if}
46  <CheckboxPrimitive.HiddenInput />
47</CheckboxPrimitive.Root>

1import { Checkbox as CheckboxPrimitive } from "@sprawlify/svelte/checkbox";23export { default as Checkbox } from "./checkbox.svelte";4export { default as CheckboxRoot } from "./checkbox-root.svelte";5export { default as CheckboxControl } from "./checkbox-control.svelte";6export { default as CheckboxIndicator } from "./checkbox-indicator.svelte";7export { default as CheckboxLabel } from "./checkbox-label.svelte";89export const CheckboxHiddenInput = CheckboxPrimitive.HiddenInput;10export const CheckboxGroup = CheckboxPrimitive.Group;11export const CheckboxContext = CheckboxPrimitive.Context;12export const CheckboxRootProvider = CheckboxPrimitive.RootProvider;13