diff --git a/resources/js/views/formtemplate/CheckboxesField.vue b/resources/js/views/formtemplate/CheckboxesField.vue
index aa02b1e6..dc311d76 100644
--- a/resources/js/views/formtemplate/CheckboxesField.vue
+++ b/resources/js/views/formtemplate/CheckboxesField.vue
@@ -1,20 +1,30 @@
 <template>
     <div class="space-y-1">
         <span class="text-xs font-semibold text-gray-400">Optionen</span>
-        <f-text
-            v-for="(option, index) in modelValue.options"
-            :id="`options-${index}`"
-            :key="index"
-            size="sm"
-            :name="`options-${index}`"
-            :model-value="option"
-            @update:modelValue="$emit('update:modelValue', {...props.modelValue, options: props.modelValue.options.toSpliced(index, 1, $event)})"
-        ></f-text>
-        <ui-icon-button icon="plus" @click="$emit('update:modelValue', {...modelValue, options: [...modelValue.options, '']})">Option einfügen</ui-icon-button>
+        <div v-for="(option, index) in modelValue.options" :key="index" class="flex space-x-2">
+            <f-text
+                :id="`options-${index}`"
+                size="sm"
+                class="grow"
+                :name="`options-${index}`"
+                :model-value="option"
+                @update:modelValue="$emit('update:modelValue', {...props.modelValue, options: setOption(props.modelValue.options, index, $event)})"
+            ></f-text>
+            <ui-action-button
+                tooltip="Löschen"
+                icon="trash"
+                class="btn-danger"
+                @click="$emit('update:modelValue', {...modelValue, options: removeOption(modelValue.options, index)})"
+            ></ui-action-button>
+        </div>
+        <ui-icon-button icon="plus" @click="$emit('update:modelValue', {...modelValue, options: addOption(modelValue.options)})">Option einfügen</ui-icon-button>
     </div>
 </template>
 
 <script setup>
+import useElements from './useElements.js';
+const {addOption, setOption, removeOption} = useElements();
+
 const props = defineProps({
     modelValue: {},
     meta: {},
diff --git a/resources/js/views/formtemplate/RadioField.vue b/resources/js/views/formtemplate/RadioField.vue
index 0cbc6fb8..98f52719 100644
--- a/resources/js/views/formtemplate/RadioField.vue
+++ b/resources/js/views/formtemplate/RadioField.vue
@@ -1,16 +1,23 @@
 <template>
     <div class="space-y-1">
         <span class="text-xs font-semibold text-gray-400">Optionen</span>
-        <f-text
-            v-for="(option, index) in modelValue.options"
-            :id="`options-${index}`"
-            :key="index"
-            size="sm"
-            :name="`options-${index}`"
-            :model-value="option"
-            @update:modelValue="$emit('update:modelValue', {...props.modelValue, options: props.modelValue.options.toSpliced(index, 1, $event)})"
-        ></f-text>
-        <ui-icon-button icon="plus" @click="$emit('update:modelValue', {...modelValue, options: [...modelValue.options, '']})">Option einfügen</ui-icon-button>
+        <div v-for="(option, index) in modelValue.options" :key="index" class="flex space-x-2">
+            <f-text
+                :id="`options-${index}`"
+                size="sm"
+                class="grow"
+                :name="`options-${index}`"
+                :model-value="option"
+                @update:modelValue="$emit('update:modelValue', {...props.modelValue, options: setOption(props.modelValue.options, index, $event)})"
+            ></f-text>
+            <ui-action-button
+                tooltip="Löschen"
+                icon="trash"
+                class="btn-danger"
+                @click="$emit('update:modelValue', {...modelValue, options: removeOption(modelValue.options, index)})"
+            ></ui-action-button>
+        </div>
+        <ui-icon-button icon="plus" @click="$emit('update:modelValue', {...modelValue, options: addOption(modelValue.options)})">Option einfügen</ui-icon-button>
     </div>
     <f-switch
         id="fieldrequired"
@@ -24,6 +31,9 @@
 </template>
 
 <script setup>
+import useElements from './useElements.js';
+const {addOption, setOption, removeOption} = useElements();
+
 const props = defineProps({
     modelValue: {},
     meta: {},
diff --git a/resources/js/views/formtemplate/useElements.js b/resources/js/views/formtemplate/useElements.js
new file mode 100644
index 00000000..062c5523
--- /dev/null
+++ b/resources/js/views/formtemplate/useElements.js
@@ -0,0 +1,15 @@
+export default function useElements() {
+    function addOption(options) {
+        return [...options, ''];
+    }
+
+    function setOption(options, index, $event) {
+        return options.toSpliced(index, 1, $event);
+    }
+
+    function removeOption(options, index) {
+        return options.toSpliced(index, 1);
+    }
+
+    return {addOption, setOption, removeOption};
+}