Add components/Checkbox, Input, Radio

src/components/Checkbox/index.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Input from '../Input';
+
+export default function Checkbox({
+  name,
+  checked,
+  label,
+  wrapperStyle,
+  inputStyle,
+  labelStyle,
+  ...restProps
+}) {
+  return (
+    <div style={wrapperStyle}>
+      <Input
+        {...restProps}
+        type="checkbox"
+        name={name}
+        checked={checked}
+        style={inputStyle}
+      />
+      <label style={labelStyle} htmlFor={name}>
+        {label}
+      </label>
+    </div>
+  );
+}
+
+Checkbox.propTypes = {
+  name: PropTypes.string,
+  checked: PropTypes.bool,
+  label: PropTypes.string,
+  wrapperStyle: PropTypes.object,
+  inputStyle: PropTypes.object,
+  labelStyle: PropTypes.object,
+};
+
+Checkbox.defaultProps = {
+  checked: false
+};

src/components/Input/index.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default function Input({
+  type,
+  name,
+  minLength,
+  maxLength,
+  size,
+  ...restProps
+}) {
+  return (
+    <input
+      {...restProps}
+      type={type}
+      id={name}
+      name={name}
+      minLength={minLength}
+      maxLength={maxLength}
+      size={size}
+    />
+  );
+}
+
+Input.propTypes = {
+  type: PropTypes.oneOf([
+    'color',
+    'date',
+    'datetime-local',
+    'email',
+    'file',
+    'hidden',
+    'checkbox',
+    'radio',
+    'image',
+    'month',
+    'number',
+    'password',
+    'range',
+    'search',
+    'tel',
+    'text',
+    'time',
+    'url',
+    'week',
+  ]).isRequired,
+  name: PropTypes.string,
+  minLength: PropTypes.number,
+  maxLength: PropTypes.number,
+  size: PropTypes.number,
+};
+
+Input.defaultProps = {
+  type: 'text',
+};

src/components/Radio/index.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Input from '../Input';
+
+export default function Radio({
+  name,
+  value,
+  checked,
+  label,
+  wrapperStyle,
+  inputStyle,
+  labelStyle,
+  ...restProps
+}) {
+  return (
+    <div style={wrapperStyle}>
+      <Input
+        {...restProps}
+        type="radio"
+        name={name}
+        checked={checked}
+        style={inputStyle}
+        value={value}
+      />
+      <label style={labelStyle} htmlFor={name}>
+        {label}
+      </label>
+    </div>
+  );
+}
+
+Radio.propTypes = {
+  name: PropTypes.string,
+  value: PropTypes.string,
+  checked: PropTypes.bool,
+  label: PropTypes.string,
+  wrapperStyle: PropTypes.object,
+  inputStyle: PropTypes.object,
+  labelStyle: PropTypes.object,
+};
+
+Radio.defaultProps = {
+  checked: false
+};