import React__default from 'react';
import Checkbox from '../checkbox/index.js';
import { useField } from '../use-form/index.js';
import '../extends-e61fd370.js';
import '../defineProperty-18999f8e.js';
import '../objectWithoutProperties-72d23964.js';
import 'prop-types';
import 'classnames';
import '../slicedToArray-5b664d46.js';
import '../index-81a9bdac.js';
import '../typeof-6c6d8d7a.js';
import '../auto-id.esm-2b54f757.js';
import '../utils.esm-514fad91.js';
import '../warning-ed2bf294.js';
import '../_commonjsHelpers-57e89916.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 };
