feat: Checkboxes and Radio Buttons field types (#17934)

Co-authored-by: Your Name <you@example.com>
Co-authored-by: Roman Davydchuk <roman.davydchuk@n8n.io>
This commit is contained in:
Michael Kret
2025-08-11 17:11:22 +03:00
committed by GitHub
parent f69d8efa04
commit fdab0ab116
9 changed files with 800 additions and 40 deletions

View File

@@ -77,6 +77,10 @@ export const formFields: INodeProperties = {
default: 'text',
description: 'The type of field to add to the form',
options: [
{
name: 'Checkboxes',
value: 'checkbox',
},
{
name: 'Custom HTML',
value: 'html',
@@ -86,7 +90,7 @@ export const formFields: INodeProperties = {
value: 'date',
},
{
name: 'Dropdown List',
name: 'Dropdown',
value: 'dropdown',
},
{
@@ -109,6 +113,10 @@ export const formFields: INodeProperties = {
name: 'Password',
value: 'password',
},
{
name: 'Radio Buttons',
value: 'radio',
},
{
name: 'Text',
value: 'text',
@@ -141,7 +149,7 @@ export const formFields: INodeProperties = {
default: '',
displayOptions: {
hide: {
fieldType: ['dropdown', 'date', 'file', 'html', 'hiddenField'],
fieldType: ['dropdown', 'date', 'file', 'html', 'hiddenField', 'radio', 'checkbox'],
},
},
},
@@ -171,6 +179,7 @@ export const formFields: INodeProperties = {
},
},
},
{
displayName: 'Field Options',
name: 'fieldOptions',
@@ -203,6 +212,82 @@ export const formFields: INodeProperties = {
},
],
},
{
displayName: 'Checkboxes',
name: 'fieldOptions',
placeholder: 'Add Checkbox',
type: 'fixedCollection',
default: { values: [{ option: '' }] },
required: true,
displayOptions: {
show: {
fieldType: ['checkbox'],
},
},
typeOptions: {
multipleValues: true,
sortable: true,
},
options: [
{
displayName: 'Values',
name: 'values',
values: [
{
displayName: 'Checkbox Label',
name: 'option',
type: 'string',
default: '',
},
],
},
],
},
{
displayName: 'Radio Buttons',
name: 'fieldOptions',
placeholder: 'Add Radio Button',
type: 'fixedCollection',
default: { values: [{ option: '' }] },
required: true,
displayOptions: {
show: {
fieldType: ['radio'],
},
},
typeOptions: {
multipleValues: true,
sortable: true,
},
options: [
{
displayName: 'Values',
name: 'values',
values: [
{
displayName: 'Radio Button Label',
name: 'option',
type: 'string',
default: '',
},
],
},
],
},
{
displayName:
'Multiple Choice is a legacy option, please use Checkboxes or Radio Buttons field type instead',
name: 'multiselectLegacyNotice',
type: 'notice',
default: '',
displayOptions: {
show: {
multiselect: [true],
fieldType: ['dropdown'],
'@version': [{ _cnd: { lt: 2.3 } }],
},
},
},
{
displayName: 'Multiple Choice',
name: 'multiselect',
@@ -213,6 +298,80 @@ export const formFields: INodeProperties = {
displayOptions: {
show: {
fieldType: ['dropdown'],
'@version': [{ _cnd: { lt: 2.3 } }],
},
},
},
{
displayName: 'Limit Selection',
name: 'limitSelection',
type: 'options',
default: 'unlimited',
options: [
{
name: 'Exact Number',
value: 'exact',
},
{
name: 'Range',
value: 'range',
},
{
name: 'Unlimited',
value: 'unlimited',
},
],
displayOptions: {
show: {
fieldType: ['checkbox'],
},
},
},
{
displayName: 'Number of Selections',
name: 'numberOfSelections',
type: 'number',
default: 1,
typeOptions: {
numberPrecision: 0,
minValue: 1,
},
displayOptions: {
show: {
fieldType: ['checkbox'],
limitSelection: ['exact'],
},
},
},
{
displayName: 'Minimum Selections',
name: 'minSelections',
type: 'number',
default: 0,
typeOptions: {
numberPrecision: 0,
minValue: 0,
},
displayOptions: {
show: {
fieldType: ['checkbox'],
limitSelection: ['range'],
},
},
},
{
displayName: 'Maximum Selections',
name: 'maxSelections',
type: 'number',
default: 1,
typeOptions: {
numberPrecision: 0,
minValue: 1,
},
displayOptions: {
show: {
fieldType: ['checkbox'],
limitSelection: ['range'],
},
},
},