Component Name: radioFormInput¶

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

API Name: c-radioFormInput Type: Form Component (Utility) Target: Not exposed

Business Purpose¶

Reusable radio button input component with custom styling that highlights the selected option with a blue background. Used in forms where a single selection from multiple options is required, providing better visual feedback than standard radio buttons.

User Interface¶

Visual Description¶

Layout: Styled div containing radio input and label
Key UI Elements: Radio button, option label
Responsive: Full-width by default
Selected State: Blue background, unselected: light gray text

Component Structure¶

Files¶

radioFormInput.html - Template
radioFormInput.js - Controller (26 lines)
radioFormInput.js-meta.xml - Not exposed

JavaScript Controller¶

Properties (API)¶

@api demographicsOption¶

Type: String
Description: The value/label for this radio option

@api selectedValue¶

Type: String
Description: Currently selected value (from parent)

@api name¶

Type: String
Description: Radio button group name

Computed Properties¶

demographicsClass¶

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

isChecked¶

Returns true if selectedValue matches demographicsOption

Event Handlers¶

handleCheckboxChange¶

Dispatches "change" event with selected value

Events¶

Events Dispatched¶

change¶

new CustomEvent('change', {
    detail: { value: event.target.value }
})

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¶

<c-radio-form-input
    demographics-option="Option 1"
    selected-value={selectedValue}
    name="myRadioGroup"
    onchange={handleChange}>
</c-radio-form-input>

⚠️ Pre-Go-Live Concerns¶

HIGH¶

No unit tests: Zero coverage
Method name misleading: "handleCheckboxChange" should be "handleRadioChange"

MEDIUM¶

No accessibility: Missing aria-label or visible label association

Maintenance Notes¶

Complexity: Low Key Notes: - Simple wrapper for radio inputs with custom styling - Part of a radio group pattern (multiple instances with same name) - Parent manages selected state