From fdab0ab116afa438db1338aaddd3dfa6ef82b2bc Mon Sep 17 00:00:00 2001 From: Michael Kret <88898367+michael-radency@users.noreply.github.com> Date: Mon, 11 Aug 2025 17:11:22 +0300 Subject: [PATCH] feat: Checkboxes and Radio Buttons field types (#17934) Co-authored-by: Your Name Co-authored-by: Roman Davydchuk --- .../cli/templates/form-trigger.handlebars | 147 +++++- packages/nodes-base/nodes/Form/Form.node.ts | 4 +- .../nodes-base/nodes/Form/FormTrigger.node.ts | 3 +- .../nodes/Form/common.descriptions.ts | 163 ++++++- packages/nodes-base/nodes/Form/interfaces.ts | 39 +- .../nodes-base/nodes/Form/test/utils.test.ts | 450 ++++++++++++++++++ packages/nodes-base/nodes/Form/utils/utils.ts | 26 +- .../nodes/Form/v2/FormTriggerV2.node.ts | 4 +- packages/workflow/src/interfaces.ts | 4 + 9 files changed, 800 insertions(+), 40 deletions(-) diff --git a/packages/cli/templates/form-trigger.handlebars b/packages/cli/templates/form-trigger.handlebars index f6532a869b..40fbd485e3 100644 --- a/packages/cli/templates/form-trigger.handlebars +++ b/packages/cli/templates/form-trigger.handlebars @@ -295,9 +295,46 @@ } input[type='checkbox'] { + appearance: none; width: var(--checkbox-size); height: var(--checkbox-size); + border: 1px solid var(--color-input-border); + border-radius: 3px; cursor: pointer; + position: relative; + } + .multiselect-checkbox:checked { + background: var(--color-focus-border); + border-color: var(--color-focus-border); + } + .multiselect-checkbox:checked::after { + content: '✔'; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: white; + font-size: var(--font-size-label); + font-weight: bold; + } + + .multiselect[data-radio-select] .multiselect-checkbox { + border-radius: 50%; + width: var(--checkbox-size); + height: var(--checkbox-size); + display: flex; + align-items: center; + justify-content: center; + } + + .multiselect[data-radio-select] .multiselect-checkbox:checked { + background: white; + border-color: var(--color-focus-border); + border-width: 4px; + border-radius: 50%; + } + .multiselect[data-radio-select] .multiselect-checkbox:checked::after { + content: ''; } /* required field ----------------------------- */ .form-required { @@ -454,7 +491,22 @@ {{#if isMultiSelect}}
-
+
{{#each multiSelectOptions}}
@@ -620,6 +672,15 @@