diff --git a/packages/core/forms/sandbox/model.json b/packages/core/forms/sandbox/model.json
index fdbaa2c16c..a744412d7b 100644
--- a/packages/core/forms/sandbox/model.json
+++ b/packages/core/forms/sandbox/model.json
@@ -1,10 +1,7 @@
{
"service-id": null,
"name": null,
- "protocols": [
- "http",
- "https"
- ],
+ "protocols": "http,https",
"snis": null,
"hosts": null,
"sources": null,
diff --git a/packages/core/forms/src/components/fields/FieldRadio.vue b/packages/core/forms/src/components/fields/FieldRadio.vue
index 7afc8baccd..552bab2e01 100644
--- a/packages/core/forms/src/components/fields/FieldRadio.vue
+++ b/packages/core/forms/src/components/fields/FieldRadio.vue
@@ -6,7 +6,9 @@
:key="option.value"
v-model="inputValue"
:label="option.name"
+ :label-attributes="{ info: schema.help }"
:name="schema.name"
+ :required="schema.required || undefined"
:selected-value="option.value"
@change="onChange"
/>
diff --git a/packages/core/forms/src/components/fields/FieldSwitch.vue b/packages/core/forms/src/components/fields/FieldSwitch.vue
index fc45af3200..478eab1ef3 100644
--- a/packages/core/forms/src/components/fields/FieldSwitch.vue
+++ b/packages/core/forms/src/components/fields/FieldSwitch.vue
@@ -7,7 +7,9 @@
:class="schema.fieldClasses"
:disabled="disabled || undefined"
:label="inputValue ? schema.textOn || t('vfg.labels.on') : schema.textOff || t('vfg.labels.off')"
+ :label-attributes="{ info: schema.help }"
:name="schema.inputName"
+ :required="schema.required || undefined"
/>
diff --git a/packages/core/forms/src/components/fields/__tests__/FieldInput.cy.ts b/packages/core/forms/src/components/fields/__tests__/FieldInput.cy.ts
index 5fc52bab72..c2fc614434 100644
--- a/packages/core/forms/src/components/fields/__tests__/FieldInput.cy.ts
+++ b/packages/core/forms/src/components/fields/__tests__/FieldInput.cy.ts
@@ -39,9 +39,9 @@ describe(' - FieldInput', () => {
// check required state
if (schema.fields[0].required) {
- cy.get(`.form-group-label.required[for="${fieldKey}"]`).should('exist')
+ cy.get('.required').find(`.form-group-label[for="${fieldKey}"]`).should('exist')
} else {
- cy.get(`.form-group-label.required[for="${fieldKey}"]`).should('not.exist')
+ cy.get('.required').find(`.form-group-label[for="${fieldKey}"]`).should('not.exist')
}
// check help text
diff --git a/packages/core/forms/src/components/fields/__tests__/FieldSwitch.cy.ts b/packages/core/forms/src/components/fields/__tests__/FieldSwitch.cy.ts
index 2c390a9e3b..56e6460b14 100644
--- a/packages/core/forms/src/components/fields/__tests__/FieldSwitch.cy.ts
+++ b/packages/core/forms/src/components/fields/__tests__/FieldSwitch.cy.ts
@@ -12,6 +12,7 @@ describe(' - FieldSwitch', () => {
id: fieldKey,
inputType: 'text',
label: fieldLabel,
+ required: true,
}],
}
@@ -34,6 +35,19 @@ describe(' - FieldSwitch', () => {
// check VFG label is set correctly
cy.get(`.form-group-label[for="${fieldKey}"]`).should('be.visible')
cy.get(`.form-group-label[for="${fieldKey}"]`).should('contain.text', fieldLabel)
+
+ // check required state
+ if (schema.fields[0].required) {
+ cy.get(`.form-group-label.required[for="${fieldKey}"]`).should('exist')
+ } else {
+ cy.get(`.form-group-label.required[for="${fieldKey}"]`).should('not.exist')
+ }
+
+ // check help text
+ if (schema.fields[0].help) {
+ cy.get(`label[for="${fieldKey}"] .info-icon`).should('be.visible')
+ cy.get(`label[for="${fieldKey}"]`).should('contain.text', schema.fields[0].help)
+ }
})
it('renders default state correctly - with model', () => {