feat(davinci-client): support single checkbox component

Author: ancheetah

.gitignore

@@ -94,6 +94,7 @@ GEMINI.md
 
 .claude/worktrees
 .claude/settings.local.json
+.claude/skills
 .opensource
 
 # Polaris

e2e/davinci-app/components/boolean.ts

@@ -0,0 +1,57 @@
+/*
+ * Copyright (c) 2026 Ping Identity Corporation. All rights reserved.
+ *
+ * This software may be modified and distributed under the terms
+ * of the MIT license. See the LICENSE file for details.
+ */
+import type { ValidatedBooleanCollector, Updater } from '@forgerock/davinci-client/types';
+
+/**
+ * Creates a single checkbox and attaches it to the form
+ * @param {HTMLFormElement} formEl - The form element to attach the checkboxes to
+ * @param {ValidatedBooleanCollector} collector - Contains the configuration
+ * @param {Updater} updater - Function to call when selection changes
+ */
+export default function booleanComponent(
+  formEl: HTMLFormElement,
+  collector: ValidatedBooleanCollector,
+  updater: Updater<ValidatedBooleanCollector>,
+) {
+  // Create a container for the checkboxes
+  const containerDiv = document.createElement('div');
+  containerDiv.className = 'single-checkbox-container';
+
+  // Create a heading/label for the checkbox group
+  const groupLabel = document.createElement('div');
+  groupLabel.textContent = collector.output.label || 'Single Checkbox';
+  groupLabel.className = 'single-checkbox-label';
+  containerDiv.appendChild(groupLabel);
+
+  // Create checkboxes for each option
+  const wrapper = document.createElement('div');
+  wrapper.className = 'checkbox-wrapper';
+
+  const checkbox = document.createElement('input');
+  checkbox.type = 'checkbox';
+  checkbox.id = collector.output.key;
+  checkbox.name = collector.output.key || 'single-checkbox-field';
+  checkbox.checked = collector.output.value as boolean;
+  checkbox.value = 'checked';
+
+  const label = document.createElement('label');
+  label.htmlFor = checkbox.id;
+  label.textContent = collector.output.label;
+
+  // Add event listener to handle single-select behavior
+  checkbox.addEventListener('change', (event) => {
+    const target = event.target as HTMLInputElement;
+    updater(target.value === 'checked');
+  });
+
+  wrapper.appendChild(checkbox);
+  wrapper.appendChild(label);
+  containerDiv.appendChild(wrapper);
+
+  // Append the container to the form
+  formEl.appendChild(containerDiv);
+}

e2e/davinci-app/main.ts

@@ -35,6 +35,7 @@ import fidoComponent from './components/fido.js';
 import qrCodeComponent from './components/qr-code.js';
 import agreementComponent from './components/agreement.js';
 import pollingComponent from './components/polling.js';
+import booleanComponent from './components/boolean.js';
 
 const loggerFn = {
   error: () => {
@@ -294,6 +295,8 @@ const urlParams = new URLSearchParams(window.location.search);
         singleValueComponent(formEl, collector, davinciClient.update(collector));
       } else if (collector.type === 'MultiSelectCollector') {
         multiValueComponent(formEl, collector, davinciClient.update(collector));
+      } else if (collector.type === 'ValidatedBooleanCollector') {
+        booleanComponent(formEl, collector, davinciClient.update(collector));
       }
     });
 

packages/davinci-client/src/lib/client.store.ts

@@ -338,6 +338,7 @@ export async function davinci<ActionType extends ActionTypes = ActionTypes>({
         value:
           | string
           | string[]
+          | boolean
           | PhoneNumberInputValue
           | PhoneNumberExtensionInputValue
           | FidoRegistrationInputValue

packages/davinci-client/src/lib/client.types.ts

@@ -44,28 +44,30 @@ export type CollectorValueType<T> = T extends { type: 'PasswordCollector' }
         ? string
         : T extends { type: 'MultiSelectCollector' }
           ? string[]
-          : T extends { type: 'DeviceRegistrationCollector' }
-            ? string
-            : T extends { type: 'DeviceAuthenticationCollector' }
+          : T extends { type: 'ValidatedBooleanCollector' }
+            ? boolean
+            : T extends { type: 'DeviceRegistrationCollector' }
               ? string
-              : T extends { type: 'PhoneNumberCollector' }
-                ? PhoneNumberInputValue
-                : T extends { type: 'FidoRegistrationCollector' }
-                  ? FidoRegistrationInputValue
-                  : T extends { type: 'FidoAuthenticationCollector' }
-                    ? FidoAuthenticationInputValue
-                    : T extends { category: 'SingleValueCollector' }
-                      ? string
-                      : T extends { category: 'ValidatedSingleValueCollector' }
+              : T extends { type: 'DeviceAuthenticationCollector' }
+                ? string
+                : T extends { type: 'PhoneNumberCollector' }
+                  ? PhoneNumberInputValue
+                  : T extends { type: 'FidoRegistrationCollector' }
+                    ? FidoRegistrationInputValue
+                    : T extends { type: 'FidoAuthenticationCollector' }
+                      ? FidoAuthenticationInputValue
+                      : T extends { category: 'SingleValueCollector' }
                         ? string
-                        : T extends { category: 'MultiValueCollector' }
-                          ? string[]
-                          :
-                              | string
-                              | string[]
-                              | PhoneNumberInputValue
-                              | FidoRegistrationInputValue
-                              | FidoAuthenticationInputValue;
+                        : T extends { category: 'ValidatedSingleValueCollector' }
+                          ? string
+                          : T extends { category: 'MultiValueCollector' }
+                            ? string[]
+                            :
+                                | string
+                                | string[]
+                                | PhoneNumberInputValue
+                                | FidoRegistrationInputValue
+                                | FidoAuthenticationInputValue;
 
 /**
  * Generic updater function that accepts values appropriate for the collector type.

packages/davinci-client/src/lib/collector.types.ts

@@ -16,6 +16,7 @@ import type { FidoAuthenticationOptions, FidoRegistrationOptions } from './davin
  */
 export type SingleValueCollectorTypes =
   | 'PasswordCollector'
+  | 'ValidatedBooleanCollector'
   | 'SingleValueCollector'
   | 'SingleSelectCollector'
   | 'SingleSelectObjectCollector'
@@ -157,14 +158,16 @@ export type InferSingleValueCollectorType<T extends SingleValueCollectorTypes> =
         ? ValidatedTextCollector
         : T extends 'PasswordCollector'
           ? PasswordCollector
-          : /**
+          : T extends 'ValidatedBooleanCollector'
+            ? ValidatedBooleanCollector
+            : /**
                * At this point, we have not passed in a collector type
                * or we have explicitly passed in 'SingleValueCollector'
                * So we can return either a SingleValueCollector with value
                * or without a value.
                **/
               | SingleValueCollectorWithValue<'SingleValueCollector'>
-              | SingleValueCollectorNoValue<'SingleValueCollector'>;
+                | SingleValueCollectorNoValue<'SingleValueCollector'>;
 
 /**
  * SINGLE-VALUE COLLECTOR TYPES
@@ -178,12 +181,15 @@ export type SingleValueCollectors =
   | SingleSelectCollectorWithValue<'SingleSelectCollector'>
   | SingleValueCollectorWithValue<'SingleValueCollector'>
   | SingleValueCollectorWithValue<'TextCollector'>
-  | ValidatedSingleValueCollectorWithValue<'TextCollector'>;
+  | ValidatedSingleValueCollectorWithValue<'TextCollector'>
+  | ValidatedSingleValueCollectorWithValue<'ValidatedBooleanCollector'>;
 
 export type PasswordCollector = SingleValueCollectorNoValue<'PasswordCollector'>;
 export type TextCollector = SingleValueCollectorWithValue<'TextCollector'>;
 export type SingleSelectCollector = SingleSelectCollectorWithValue<'SingleSelectCollector'>;
 export type ValidatedTextCollector = ValidatedSingleValueCollectorWithValue<'TextCollector'>;
+export type ValidatedBooleanCollector =
+  ValidatedSingleValueCollectorWithValue<'ValidatedBooleanCollector'>;
 
 /** *********************************************************************
  * MULTI-VALUE COLLECTORS
@@ -625,10 +631,8 @@ export interface ProtectOutputValue {
   universalDeviceIdentification: boolean;
 }
 
-export interface AttestationValue extends Omit<
-  PublicKeyCredential,
-  'rawId' | 'response' | 'getClientExtensionResults' | 'toJSON'
-> {
+export interface AttestationValue
+  extends Omit<PublicKeyCredential, 'rawId' | 'response' | 'getClientExtensionResults' | 'toJSON'> {
   rawId: string;
   response: {
     // https://developer.mozilla.org/en-US/docs/Web/API/AuthenticatorAttestationResponse
@@ -646,10 +650,8 @@ export interface FidoRegistrationOutputValue {
   trigger: string;
 }
 
-export interface AssertionValue extends Omit<
-  PublicKeyCredential,
-  'rawId' | 'response' | 'getClientExtensionResults' | 'toJSON'
-> {
+export interface AssertionValue
+  extends Omit<PublicKeyCredential, 'rawId' | 'response' | 'getClientExtensionResults' | 'toJSON'> {
   rawId: string;
   response: {
     // https://developer.mozilla.org/en-US/docs/Web/API/AuthenticatorAssertionResponse

packages/davinci-client/src/lib/collector.utils.ts

@@ -17,6 +17,7 @@ import type {
   InferActionCollectorType,
   NoValueCollectorTypes,
   InferNoValueCollectorType,
+  ValidatedBooleanCollector,
   ValidatedSingleValueCollectorWithValue,
   ValidatedTextCollector,
   InferValueObjectCollectorType,
@@ -45,6 +46,7 @@ import type {
   PollingField,
   ReadOnlyField,
   RedirectField,
+  SingleCheckboxField,
   SingleSelectField,
   StandardField,
   ValidatedField,
@@ -151,7 +153,7 @@ export function returnSubmitCollector(field: StandardField, idx: number) {
  * @returns {SingleValueCollector} The constructed SingleValueCollector object.
  */
 export function returnSingleValueCollector<
-  Field extends StandardField | SingleSelectField | ValidatedField,
+  Field extends StandardField | SingleSelectField | ValidatedField | SingleCheckboxField,
   CollectorType extends SingleValueCollectorTypes = 'SingleValueCollector',
 >(field: Field, idx: number, collectorType: CollectorType, data?: string) {
   let error = '';
@@ -212,10 +214,40 @@ export function returnSingleValueCollector<
         options: options,
       },
     } as InferSingleValueCollectorType<'SingleSelectCollector'>;
+  } else if (collectorType === 'ValidatedBooleanCollector') {
+    const validationArray = [];
+    if ('required' in field && field.required === true) {
+      validationArray.push({
+        type: 'required',
+        message:
+          ('validation' in field && field.validation?.errorMessage) || 'Value cannot be empty',
+        rule: true,
+      });
+    }
+
+    return {
+      category: 'ValidatedSingleValueCollector',
+      error: error || null,
+      type: collectorType,
+      id: `${field.key}-${idx}`,
+      name: field.key,
+      input: {
+        key: field.key,
+        value: false,
+        type: field.type,
+        validation: validationArray,
+      },
+      output: {
+        key: field.key,
+        label: field.label,
+        type: field.type,
+        value: false,
+      },
+    } as ValidatedSingleValueCollectorWithValue<'ValidatedBooleanCollector'>;
   } else if ('validation' in field || 'required' in field) {
     const validationArray = [];
 
-    if ('validation' in field) {
+    if ('validation' in field && field.validation && 'regex' in field.validation) {
       validationArray.push({
         type: 'regex',
         message: field.validation?.errorMessage || '',
@@ -464,6 +496,16 @@ export function returnSingleSelectCollector(field: SingleSelectField, idx: numbe
   return returnSingleValueCollector(field, idx, 'SingleSelectCollector', data);
 }
 
+/**
+ * @function returnValidatedBooleanCollector - Creates a ValidatedBooleanCollector object based on the provided field and index.
+ * @param {SingleCheckboxField} field - The field object containing key, label, type, required, and validation.
+ * @param {number} idx - The index to be used in the id of the ValidatedBooleanCollector.
+ * @returns {ValidatedBooleanCollector} The constructed ValidatedBooleanCollector object.
+ */
+export function returnValidatedBooleanCollector(field: SingleCheckboxField, idx: number) {
+  return returnSingleValueCollector(field, idx, 'ValidatedBooleanCollector');
+}
+
 /**
  * @function returnProtectCollector - Creates a ProtectCollector object based on the provided field and index.
  * @param {DaVinciField} field - The field object containing key, label, type, and links.
@@ -846,7 +888,12 @@ export function returnAgreementCollector(field: AgreementField, idx: number): Ag
  * @returns {function} - A "validator" function that validates the input value
  */
 export function returnValidator(
-  collector: ValidatedTextCollector | ObjectValueCollectors | MultiValueCollectors | AutoCollectors,
+  collector:
+    | ValidatedTextCollector
+    | ValidatedBooleanCollector
+    | ObjectValueCollectors
+    | MultiValueCollectors
+    | AutoCollectors,
 ) {
   const rules = collector.input.validation;
   return (value: string | string[] | Record<string, unknown>) => {

packages/davinci-client/src/lib/davinci.types.ts

@@ -112,6 +112,17 @@ export type ValidatedField = {
   };
 };
 
+export type SingleCheckboxField = {
+  type: 'SINGLE_CHECKBOX';
+  inputType: 'BOOLEAN';
+  key: string;
+  label: string;
+  required: boolean;
+  validation?: {
+    errorMessage: string;
+  };
+};
+
 export type SingleSelectField = {
   inputType: 'SINGLE_SELECT';
   key: string;
@@ -185,10 +196,11 @@ export type ProtectField = {
   universalDeviceIdentification: boolean;
 };
 
-export interface FidoRegistrationOptions extends Omit<
-  PublicKeyCredentialCreationOptions,
-  'challenge' | 'user' | 'pubKeyCredParams' | 'excludeCredentials'
-> {
+export interface FidoRegistrationOptions
+  extends Omit<
+    PublicKeyCredentialCreationOptions,
+    'challenge' | 'user' | 'pubKeyCredParams' | 'excludeCredentials'
+  > {
   challenge: number[];
   user: {
     id: number[];
@@ -216,10 +228,8 @@ export type FidoRegistrationField = {
   required: boolean;
 };
 
-export interface FidoAuthenticationOptions extends Omit<
-  PublicKeyCredentialRequestOptions,
-  'challenge' | 'allowCredentials'
-> {
+export interface FidoAuthenticationOptions
+  extends Omit<PublicKeyCredentialRequestOptions, 'challenge' | 'allowCredentials'> {
   challenge: number[];
   allowCredentials?: {
     id: number[];
@@ -260,7 +270,12 @@ export type ComplexValueFields =
 export type MultiValueFields = MultiSelectField;
 export type ReadOnlyFields = ReadOnlyField | QrCodeField | AgreementField;
 export type RedirectFields = RedirectField;
-export type SingleValueFields = StandardField | ValidatedField | SingleSelectField | ProtectField;
+export type SingleValueFields =
+  | StandardField
+  | ValidatedField
+  | SingleCheckboxField
+  | SingleSelectField
+  | ProtectField;
 
 export type DaVinciField =
   | ComplexValueFields