From 8fe513282ad70856085e79f365b8c078f0e18b8d Mon Sep 17 00:00:00 2001
From: Dave MacFarlane <driusan@mcin.ca>
Date: Fri, 17 Mar 2023 09:19:03 -0400
Subject: [PATCH] [Form.js] Add support for vertical Radio button groups
 (#8414)

This adds a vertical=true/false attribute to our wrapper. The option toggles whether the radio options are displayed vertically or horizontally on the page.
---
 jsx/Form.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/jsx/Form.js b/jsx/Form.js
index a87afa21e15..41df16c4c1c 100644
--- a/jsx/Form.js
+++ b/jsx/Form.js
@@ -2664,7 +2664,7 @@ class RadioElement extends React.Component {
 
     const styleRow = {
       display: 'flex',
-      flexDirection: 'row',
+      flexDirection: this.props.vertical ? 'column' : 'row',
       flexWrap: 'wrap',
       width: '100%',
     };
@@ -2772,6 +2772,7 @@ RadioElement.propTypes = {
   options: PropTypes.object.isRequired,
   disabled: PropTypes.bool,
   required: PropTypes.bool,
+  vertical: PropTypes.bool,
   checked: PropTypes.string.isRequired,
   errorMessage: PropTypes.string,
   elementClass: PropTypes.string,
@@ -2780,6 +2781,7 @@ RadioElement.propTypes = {
 RadioElement.defaultProps = {
   disabled: false,
   required: false,
+  vertical: false,
   errorMessage: '',
   elementClass: 'row form-group',
   onUserInput: function() {