Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576<script lang="ts"> import type { Snippet } from "svelte"; import type { HTMLInputAttributes } from "svelte/elements"; import { tv } from "tailwind-variants"; import Check from "$icon/check"; import Minus from "$icon/minus";
const checkbox = tv({ slots: { label: "inline-flex items-center gap-xs", input: [ "peer size-4 shrink-0 appearance-none rounded border border-border-default bg-background-default", "transition-colors duration-150 checked:transition-none indeterminate:transition-none", "hover:cursor-pointer hover:bg-background-inset", "checked:border-foreground-default checked:bg-foreground-default checked:hover:bg-foreground-default", "indeterminate:border-foreground-default indeterminate:bg-foreground-default indeterminate:hover:bg-foreground-default", "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-foreground-default", "disabled:hover:pointer-events-none disabled:hover:bg-background-default" ], check: [ "pointer-events-none absolute inset-0 m-auto hidden size-3.5 text-background-default", "peer-checked:block peer-indeterminate:hidden", "peer-disabled:text-foreground-disabled peer-disabled:hover:cursor-default" ], minus: [ "pointer-events-none absolute inset-0 m-auto hidden size-3.5 text-background-default", "peer-indeterminate:block", "peer-disabled:text-foreground-disabled peer-disabled:hover:cursor-default" ] }, variants: { disabled: { true: { label: "text-foreground-disabled hover:pointer-events-none" }, false: { label: "cursor-pointer" } } } });
interface Props extends Omit<HTMLInputAttributes, "type" | "class" | "checked" | "children"> { checked?: boolean; indeterminate?: boolean; disabled?: boolean; class?: string; children?: Snippet; }
let { checked = $bindable(false), indeterminate = $bindable(false), disabled = false, class: className, children, ...rest }: Props = $props();
const classes = $derived(checkbox({ disabled }));</script>
<label class={classes.label({ class: className })}> <span class="relative inline-flex size-4 shrink-0"> <input type="checkbox" bind:checked bind:indeterminate {disabled} class={classes.input()} {...rest} /> <Check class={classes.check()} aria-hidden="true" /> <Minus class={classes.minus()} aria-hidden="true" /> </span> {#if children} <span>{@render children()}</span> {/if}</label>