Component Name: multiCheckboxFormInput¶

Last Updated: 2025-09-29 Source Code: https://bitbucket.org/i2cinc/i2c.salesforce.metadata/src/STAGING/force-app/main/default/lwc/multiCheckboxFormInput

API Name: c-multiCheckboxFormInput Type: Form Component Target: Not exposed

Business Purpose¶

Reusable multi-select checkbox component with custom styling and special logic for "Prefer not to say" option. When "Prefer not to say" is selected, it clears all other selections and vice versa. Used in demographic or preference forms.

User Interface¶

Visual Description¶

Layout: Styled checkbox with label
Key UI Elements: Checkbox, option label
Responsive: Full-width
Selected State: Blue background, unselected: light gray text

Component Structure¶

Files¶

multiCheckboxFormInput.html - Template
multiCheckboxFormInput.js - Controller (47 lines)
multiCheckboxFormInput.js-meta.xml - Not exposed

JavaScript Controller¶

Properties (API)¶

@api option¶

Type: String
Description: Single option label for this checkbox

@api selectedValues¶

Type: String (semicolon-separated)
Description: Currently selected values (e.g., "Option1;Option2;Option3")

Computed Properties¶

selectedValuesList¶

Converts semicolon-separated string to array

isChecked¶

Returns true if option is in selectedValuesList

checkboxClass¶

Returns CSS classes with conditional "option-blue-bg"

Event Handlers¶

handleCheckboxChange¶

Special Logic: - If "Prefer not to say" is checked: clears all other selections - If any other option is checked: removes "Prefer not to say" - Maintains array of selections - Joins with semicolon for parent

Events¶

Events Dispatched¶

change¶

new CustomEvent('change', {
    detail: { values: updatedValuesString } // semicolon-separated
})

Styling¶

Custom CSS Classes¶

.option-blue-bg: Selected background
.text-light-gray: Unselected text color
Bootstrap utility classes (fs-5, px-4, py-4, shadow, cursor-pointer, w-100)

Usage Examples¶

<!-- Render multiple instances for each option -->
<c-multi-checkbox-form-input
    option="Option 1"
    selected-values={selectedValues}
    onchange={handleChange}>
</c-multi-checkbox-form-input>

<c-multi-checkbox-form-input
    option="Prefer not to say"
    selected-values={selectedValues}
    onchange={handleChange}>
</c-multi-checkbox-form-input>

⚠️ Pre-Go-Live Concerns¶

HIGH¶

No unit tests: Zero coverage
Hardcoded "Prefer not to say": Special logic tied to specific string (lines 25, 28)
No accessibility: Checkboxes need labels or aria-label

MEDIUM¶

String-based value passing: Semicolon-separated strings fragile (what if value contains semicolon?)
No validation: Doesn't validate that option is in allowed list

Maintenance Notes¶

Complexity: Low-Medium Key Notes: - Part of multi-checkbox group pattern (multiple instances with same selectedValues) - "Prefer not to say" is mutually exclusive with other options - Parent must manage selectedValues state - Values joined with semicolon (watch for values containing semicolons)

Browser Compatibility: - Standard browser support