formik-stepper/dist/fields/CheckBoxField/CheckBoxField.js

Get ready to take your form-building game to the next level with this revolutionary React component. With its seamless integration with the powerful Formik library, you'll be building forms faster and more efficiently than ever before. But that's not all

var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import React, { memo, useId, useMemo } from "react";
import { useField } from "formik";
var initStyle = {
    height: "1em",
    width: "1em",
    marginInlineEnd: " 0.5em",
    marginTop: "0.25em",
    verticalAlign: "top",
};
export var CheckBoxField = memo(function (_a) {
    var label = _a.label, labelColor = _a.labelColor, component = _a.component, style = _a.style, props = __rest(_a, ["label", "labelColor", "component", "style"]);
    var Id = useId();
    var _b = useField(props), field = _b[0], meta = _b[1];
    var error = meta.error, touched = meta.touched;
    var errorText = error || null;
    var hasError = !!error;
    var FieldComponent = useMemo(function () { return (React.createElement(React.Fragment, null,
        React.createElement("div", { style: {
                display: "flex",
                flexDirection: "column",
                marginBottom: "1em",
            } },
            React.createElement("div", null,
                React.createElement("input", __assign({ type: "checkbox", id: Id, style: __assign(__assign({}, initStyle), style) }, props, field)),
                React.createElement("label", { htmlFor: Id, style: { color: labelColor } }, label)),
            hasError && touched ? (React.createElement("label", { htmlFor: Id, style: { color: "#b50000", marginTop: 5 } }, errorText)) : null))); }, 
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [Id, errorText, hasError, label, labelColor, style, touched]);
    if (typeof component === "function") {
        return component({ field: field, meta: meta, label: label });
    }
    return FieldComponent;
});
CheckBoxField.displayName = "CheckBoxField";
export default CheckBoxField;