From f3eeb263d3ddf552960b276b80185d312763296f Mon Sep 17 00:00:00 2001
From: nzambello <nzambello@protonmail.com>
Date: Tue, 29 Sep 2020 15:17:57 +0200
Subject: [PATCH] chg: used buttons instead of radio

---
 src/widget/RadioWidget.jsx  | 26 +++++++++++++++-----------
 src/widget/radio_widget.css |  6 ++++++
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/src/widget/RadioWidget.jsx b/src/widget/RadioWidget.jsx
index cb441aa..b82e609 100644
--- a/src/widget/RadioWidget.jsx
+++ b/src/widget/RadioWidget.jsx
@@ -1,5 +1,7 @@
 import React from 'react';
+import { Button } from 'semantic-ui-react';
 import { FormFieldWrapper } from '@plone/volto/components';
+import cx from 'classnames';
 import './radio_widget.css';
 
 const RadioWidget = ({
@@ -29,17 +31,19 @@ const RadioWidget = ({
     >
       <div className="radio-widget">
         {valueList.map((opt) => (
-          <div className="radio-button" key={opt.value}>
-            <input
-              type="radio"
-              name={id}
-              id={id + opt.value}
-              value={opt.value}
-              checked={opt.value === value}
-              onChange={(e) => onChange(id, e.target.value)}
-            />
-            <label htmlFor={id + opt.value}>{opt.label}</label>
-          </div>
+          <Button
+            key={opt.value}
+            id={id + opt.value}
+            className={cx('radio-button', { selected: opt.value === value })}
+            disabled={opt.value === value}
+            size="mini"
+            onClick={(e) => {
+              e.preventDefault();
+              onChange(id, opt.value);
+            }}
+          >
+            {opt.label}
+          </Button>
         ))}
       </div>
     </FormFieldWrapper>
diff --git a/src/widget/radio_widget.css b/src/widget/radio_widget.css
index 415f05a..1513abc 100644
--- a/src/widget/radio_widget.css
+++ b/src/widget/radio_widget.css
@@ -1,3 +1,9 @@
+.radio-widget {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
 .radio-widget .radio-button {
   margin: 0.5rem 0;
 }