Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758<script lang="ts"> import type { Snippet } from "svelte"; import type { HTMLInputAttributes } from "svelte/elements";
interface Props extends Omit<HTMLInputAttributes, "type" | "class" | "checked" | "children"> { checked?: boolean; disabled?: boolean; /** `inline` hugs the label, `block` stretches it to fill the row. */ layout?: "inline" | "block"; class?: string; children?: Snippet; }
let { checked = $bindable(false), disabled = false, layout = "inline", class: className, children, ...rest }: Props = $props();
const labelClasses = $derived( [ "items-center gap-2", layout === "block" ? "flex w-full" : "inline-flex", disabled ? "cursor-not-allowed text-foreground-disabled" : "cursor-pointer", className ?? "" ].join(" ") );
const inputClasses = [ "peer absolute inset-0 size-full appearance-none rounded-full bg-background-muted", "transition-colors duration-150", "checked:bg-foreground-default", "enabled:hover:bg-background-inset checked:enabled:hover:bg-foreground-muted", "focus-visible:ring-2 focus-visible:ring-border-strong focus-visible:outline-none", "disabled:cursor-not-allowed disabled:bg-background-inset checked:disabled:bg-foreground-disabled" ].join(" ");
const thumbClasses = [ "pointer-events-none absolute top-px left-px size-4 rounded-full bg-foreground-on-emphasis", "transition-transform duration-150 peer-checked:translate-x-[15px]" ].join(" ");
const textClasses = $derived(layout === "block" ? "min-w-0 flex-1" : "whitespace-nowrap");</script>
<label class={labelClasses}> <span class="relative inline-flex h-[18px] w-[33px] shrink-0"> <input type="checkbox" role="switch" bind:checked {disabled} class={inputClasses} {...rest} /> <span class={thumbClasses} aria-hidden="true"></span> </span> {#if children} <span class={textClasses}>{@render children()}</span> {/if}</label>