feat: add Radio Field (redwoodjs#479)

* Add Radio Field

* Fix eslint error

* Add documentation for RadioField

packages/web/src/form/README.md

@@ -11,6 +11,8 @@ Redwood currently provides the following form components:
 * `<Label>` is used in place of the HTML `<label>` tag and can respond to errors with different styling
 * `<TextField>` is used in place of the HTML `<input type="text">` tag and can accept validation options and be styled differently in the presence of an error
 * `<TextAreaField>` is used in place of the HTML `<textarea>` tag and can accept validation options and be styled differently in the presence of an error
+* `<RadioField>` is used in place of the HTML `<input type="radio">` tag and can accept validation options.
+ The default validation for `required` is `false` for this field, To make it required, please pass the prop `validation={{ required: true }}` for all the `<RadioField>`.
 * `<FieldError>` will display error messages from form validation and server errors
 * `<Submit>` is used in place of `<button type="submit">` and will trigger a validation check and "submission" of the form (actually executes the function given to the `onSubmit` attribute on `<Form>`)
 

packages/web/src/form/form.js

@@ -211,6 +211,21 @@ const TextField = (props) => {
   )
 }
 
+// Renders an <input type="radio"> field
+const RadioField = (props) => {
+  const { register } = useFormContext()
+  const tagProps = inputTagProps(props)
+
+  return (
+    <input
+      {...tagProps}
+      type="radio"
+      id={props.id || props.name}
+      ref={register(props.validation || { required: false })}
+    />
+  )
+}
+
 // Renders a <select> field
 
 const SelectField = (props) => {
@@ -240,6 +255,7 @@ export {
   HiddenField,
   TextAreaField,
   TextField,
+  RadioField,
   SelectField,
   Submit,
 }