shelving/ui/form/CheckboxInput.js

Toolkit for using data in JavaScript.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { notNullish } from "../../util/null.js";
import { getFlexClass } from "../style/Flex.js";
import { getClass } from "../util/css.js";
import { CHECKBOX_CLASS, LABEL_INPUT_CLASS, PLACEHOLDER_CLASS } from "./Input.js";
/** Checkbox element. */
export function CheckboxInput({ name, title, placeholder = title || "Yes", required = false, disabled = false, message = "", value = false, onValue, children, ...variants }) {
    const hasChildren = notNullish(children);
    return (_jsxs("label", { className: getClass(LABEL_INPUT_CLASS, getFlexClass(variants), hasChildren && PLACEHOLDER_CLASS), "aria-invalid": !!message, children: [_jsx("input", { name: name, type: "checkbox", defaultChecked: !!value, onChange: e => onValue?.(!!e.currentTarget.checked), required: required, disabled: disabled, title: message, className: CHECKBOX_CLASS }), _jsx("span", { children: hasChildren ? children : placeholder })] }));
}