import React__default from 'react';
import Checkbox from '../checkbox/index.js';
import { useField } from '../use-form/index.js';
import '../extends-C4cduGrv.js';
import '../defineProperty-CEd-kZQW.js';
import '../objectWithoutProperties-TXwlfNxG.js';
import 'prop-types';
import 'classnames';
import '../slicedToArray-BB-AwwkK.js';
import '../index-qSfOyGhk.js';
import '../typeof-CgC7Bq6K.js';
import '../auto-id.esm-Cly76abB.js';
import '../utils.esm-CKyxlHOy.js';
import '../warning-s9zGJbnw.js';
import '../_commonjsHelpers-_1FafXWI.js';
import '../use-progress/index.js';
import '../use-trailing-debounce/index.js';

function CheckboxField(_ref) {
  var id = _ref.id,
      name = _ref.name,
      label = _ref.label,
      placeholder = _ref.placeholder,
      value = _ref.value,
      onChange = _ref.onChange;
  var field = useField({
    id: id,
    name: name,
    value: value,
    onChange: onChange
  });
  return /*#__PURE__*/React__default.createElement("div", {
    className: "flex items-center"
  }, /*#__PURE__*/React__default.createElement(Checkbox, {
    id: field.id,
    name: name,
    placeholder: placeholder,
    onBlur: field.onBlur,
    onChange: field.onChange,
    checked: field.value
  }), /*#__PURE__*/React__default.createElement("label", {
    className: "ml-2 mb-0 font-sans text-gray-900",
    htmlFor: field.id
  }, label));
}

export { CheckboxField as default };
