added dynamic text field

app/components/radio-button.hbs

@@ -1,16 +1,27 @@
-<div class="form-group">
-  <label>{{this.args.element.label}}</label>
-  {{#each this.args.element.options as |option|}}
-    <div class="radio-option">
+<div class="field">
+  {{#each @element.options as |option|}}
+    <div class="control">
+      <label class="radio">
+        <input
+          type="radio"
+          name={{@element.id}}
+          value={{option.value}}
+          checked={{eq @element.value option.value}}
+          {{on "change" this.updateSelection}}
+        >
+        {{option.label}}
+      </label>
+    </div>
+  {{/each}}
+
+  {{#if this.showOtherInput}}
+    <div class="control mt-2">
       <input
-        type="radio"
-        id={{option.value}}
-        name={{this.args.element.id}}
-        value={{option.value}}
-        {{on "change" this.updateSelection}} 
-        checked={{eq this.args.element.value option.value}}
+        type="text"
+        class="input"
+        placeholder="Please specify"
+        {{on "input" this.updateOtherValue}}
       >
-      <label for={{option.value}}>{{option.label}}</label>
     </div>
-  {{/each}}
+  {{/if}}
 </div>

app/components/radio-button.js

@@ -1,15 +1,30 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
 
 export default class RadioButtonComponent extends Component {
+    @tracked showOtherInput = false;
+
   @action
   updateSelection(event) {
-    // Проверим, что event и event.target существуют
-    if (event && event.target) {
-      const selectedValue = event.target.value; // Получаем значение из event
-      this.args.updateValue(selectedValue); // Передаём выбранное значение
+    const selectedValue = event.target.value;
+
+    if (selectedValue === 'other') {
+      this.showOtherInput = true; // Показываем текстовое поле
     } else {
-      console.error('Event or event.target is undefined');
+      this.showOtherInput = false; // Скрываем текстовое поле
+    }
+
+    if (this.args.updateValue) {
+      this.args.updateValue(selectedValue); // Обновляем выбранное значение
+    }
+  }
+
+  @action
+  updateOtherValue(event) {
+    const otherValue = event.target.value;
+    if (this.args.updateValue) {
+      this.args.updateValue(otherValue); // Передаем значение "Other"
     }
   }
 }

app/controllers/survey.js

@@ -39,6 +39,7 @@ export default class SurveyPageController extends Controller {
             { label: 'Red', value: 'red' },
             { label: 'Green', value: 'green' },
             { label: 'Blue', value: 'blue' },
+            { value: "other", label: "Other" }
           ],
         ),
       ],
@@ -72,9 +73,9 @@ export default class SurveyPageController extends Controller {
           'plans',
           true,
           [
-            { label: 'Technologies', cheked: false },
-            { label: 'People', cheked: false },
-            { label: 'Other', cheked: false },
+            { label: 'Technologies', checked: false },
+            { label: 'People', checked: false },
+            { label: 'Other', checked: false },
           ],
         ),
       ],

app/helpers/lookup-component.js

@@ -4,6 +4,8 @@ export default helper(function lookupComponent([type]) {
   switch (type) {
     case 'text':
       return 'text-field';
+    case 'checkbox':
+      return 'checkbox-field';
     case 'email':
       return 'email-field';
     case 'button':

app/templates/survey.hbs

@@ -35,7 +35,9 @@
               </div>
             {{/if}}
             {{#if (eq element.type "checkbox")}}
+              <div class="field">
                 <Checkbox @element={{element}} @updateValue={{fn this.updateElementValue element}} />
+              </div>
             {{/if}}
           {{/each}}
         </div>