add radio input

src/components/forms/controlled/inputTypes.tsx

@@ -67,6 +67,25 @@ export const TextArea = (props: MakeControlled<typeof Uncontrolled.TextArea>) =>
   />;
 };
 
+export const Radio = (props: MakeControlled<typeof Uncontrolled.Radio>) => {
+  const {data, namespace, setInput} = useFormHelpers();
+
+  const onChangeValue = (value: boolean | undefined) => {
+    props.onChangeValue?.(value);
+    setInput.field(props.name)(value);
+  };
+
+  const checked = data[props.name];
+  useEmptyDisabledValue(props, checked, onChangeValue);
+
+  return <Uncontrolled.Radio
+    {...props}
+    name={namespace + '.' + props.name}
+    checked={!!checked}
+    onChangeValue={onChangeValue}
+  />;
+};
+
 export const Checkbox = (props: MakeControlled<typeof Uncontrolled.Checkbox>) => {
   const {data, namespace, setInput} = useFormHelpers();
 

src/components/forms/uncontrolled/inputTypes.tsx

@@ -152,6 +152,37 @@ export const Select = ({
   </FormInputWrapper>;
 };
 
+/*
+ * radio element
+ */
+type RadioProps = React.ComponentPropsWithoutRef<'input'> & InputProps & {
+  onChangeValue?: (value: boolean | undefined) => void;
+  wrapperProps?: React.ComponentPropsWithoutRef<'label'>;
+};
+const RadioLine = styled.div`
+  flex-direction: row;
+  display: flex;
+  align-items: center;
+`;
+export const Radio = ({
+  label,
+  help,
+  wrapperProps,
+  onChangeValue,
+  ...props
+}: RadioProps) => {
+  return <FormInputWrapper {...wrapperProps}>
+    <RadioLine>
+      <input type="radio" {...props} onChange={e => {
+        onChangeValue?.(!!e.target.checked);
+        props.onChange?.(e);
+      }}/>
+      <FormLabelText><RequiredIndicator show={props.required} />{label}</FormLabelText>
+    </RadioLine>
+    <HelpText value={help} />
+  </FormInputWrapper>;
+};
+
 /*
  * checkbox element
  */