bausteine/dist/components/Checkbox/index.js

Design System

import { html, observe } from "hydro-js";
import createWebComponent from "../../createWebComponent.js";
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 place-items-center border p-4 leading-11 select-none"
      >
        <input
          type="checkbox"
          class="h-6 w-6"
          disabled="${props.disabled}"
          two-way="${props.checked}"
        />
        <slot></slot>
      </label>`;
        return elem;
    }, { reflects: true });
}