diff --git a/ivette/src/dome/src/renderer/layout/form.tsx b/ivette/src/dome/src/renderer/layout/form.tsx
index e85027a3751245d25596c0336b80f0cbbdbbd47d..df762bdcc8afcac972216851b64f05415c3f9ee1 100644
--- a/ivette/src/dome/src/renderer/layout/form.tsx
+++ b/ivette/src/dome/src/renderer/layout/form.tsx
@@ -12,7 +12,7 @@ import React from 'react';
 import * as Dome from 'dome';
 import * as Utils from 'dome/misc/utils';
 import { SVG } from 'dome/controls/icons';
-import { Checkbox } from 'dome/controls/buttons';
+import { Checkbox, Radio } from 'dome/controls/buttons';
 
 export type Error =
   | undefined | boolean | string
@@ -1041,4 +1041,39 @@ export function CheckboxField(props: CheckboxFieldProps) {
   );
 }
 
+/* --------------------------------------------------------------------------*/
+/* --- Radio Box Field                                                    ---*/
+/* --------------------------------------------------------------------------*/
+
+/** @category Form Fields */
+export interface RadioFieldProps<A> extends FieldProps<A> {
+  value: A;
+}
+
+export function RadioField<A>(props: RadioFieldProps<A>) {
+  const { hidden, disabled } = useContext(props);
+
+  if (hidden) return null;
+
+  const [selection, , setState] = props.state;
+  const onSelection = (value: A) => setState(value, undefined);
+  const { label, title, value } = props;
+  const css = Utils.classes(
+    'dome-xForm-field dome-text-label',
+    disabled && 'dome-disabled',
+  );
+
+  return (
+    <Radio
+      className={css}
+      label={label}
+      title={title}
+      value={value}
+      disabled={disabled}
+      selection={selection}
+      onSelection={onSelection}
+    />
+  );
+}
+
 // --------------------------------------------------------------------------