input-checkbox.html html

<input-checkbox>
	<label>
		<input type="checkbox">
		<span class="label">Checkbox</span>
	</label>
</input-checkbox>

<input-checkbox class="todo">
	<label>
		<input type="checkbox" class="visually-hidden">
		<span class="label">Task</span>
	</label>
</input-checkbox>

input-checkbox.css css

input-checkbox {
	flex-grow: 1;
	border-radius: var(--space-xs);

	&:focus-within {
		box-shadow: 0 0 var(--space-xxs) 2px var(--color-selection);
	}

	& input:focus {
		outline: none;
		box-shadow: none;
	}

	& label {
		font-size: var(--font-size-s);
	}

	&.todo label {
		display: flex;
		gap: var(--space-s);
		line-height: var(--input-height);
		cursor: pointer;

		&::before {
			display: inline-block;
			box-sizing: border-box;
			content: '';
			font-size: var(--font-size-l);
			text-align: center;
			width: var(--input-height);
			height: var(--input-height);
			border: 1px solid var(--color-border);
			border-radius: 100%;
			background-color: var(--color-secondary);
		}

		&:hover::before {
			background-color: var(--color-secondary-hover);
			opacity: var(--opacity-solid);
		}

		&:active::before {
			background-color: var(--color-secondary-active);
		}
	}

	&.todo[checked] label {
		opacity: var(--opacity-translucent);

		& span {
			text-decoration: line-through;
		}

		&::before {
			color: var(--color-text-inverted);
			background-color: var(--color-success);
			border-color: var(--color-success-active);
			text-shadow: 0 0 var(--space-xs) var(--color-success-active);
			content: '✓';
		}

		&:hover::before {
			background-color: var(--color-success-hover);
		}

		&:active::before {
			background-color: var(--color-success-active);
		}
	}
}

input-checkbox.ts ts

import {
	type Component,
	asBoolean,
	asString,
	component,
	first,
	on,
	RESET,
	setProperty,
	setText,
	toggleAttribute,
} from "../../../";

export type InputCheckboxProps = {
	checked: boolean;
	label: string;
};

export default component(
	"input-checkbox",
	{
		checked: asBoolean,
		label: asString(RESET),
	},
	(el) => [
		toggleAttribute("checked"),
		first<InputCheckboxProps, HTMLInputElement>(
			"input",
			setProperty("checked"),
			on("change", (e: Event) => {
				el.checked = (e.target as HTMLInputElement)?.checked;
			}),
		),
		first(".label", setText("label")),
	],
);

declare global {
	interface HTMLElementTagNameMap {
		"input-checkbox": Component<InputCheckboxProps>;
	}
}