bausteine/dist/components/Checkbox/index.js

Design System

import { html, observe } from "hydro-js";
import createWebComponent from "../../createWebComponent";
export default function Checkbox(name) {
    createWebComponent(name ?? "bau-checkbox", ({ props }) => {
        // Example of listening to props
        observe(props.checked, console.log);
        const elem = html `<label
        class="flex w-max select-none place-items-center border p-4 leading-[2.75rem]"
      >
        <input type="checkbox" class="h-6 w-6" ${props} />
        <slot></slot>
      </label>`;
        return elem;
    }, { reflects: true });
}