Unable to select Custom Checkbox

January 12, 2023

Unable to Check/Un-check custom checkbox.

CodeSandbox: https://codesandbox.io/s/stupefied-silence-f5emkf?file=/src/App.tsx

Explanation: On commenting out dispaly:none I can view, check, uncheck the blue checkbox. But the custom Checkbox cannot be checked or unchecked.

This is the expected output where the blue checkbox is not displayed. However having problem to check or uncheck the custom checkboxes. Your help is appreciated. Thank you.

>Solution :

Like you already did with the input type checkbox for the onChange event, you should include the click event handler also for the labels performing the same action:

onClick={handleSelectAll} on the first label
onClick={() => onClickDOP(day)} on the other labels

    suggestionsListComponent = (
        <ul>
            <li>
            <Checkbox checked={selectAll} onChange={handleSelectAll} />
            <label
                className="custom-checkbox-label"
                onClick={handleSelectAll}>  <--------
                All
            </label>
            </li>
            {filteredSuggestions.map((day: any, index: any) => {
            return (
                <li key={day.id}>
                <input
                    type="checkbox"
                    className=""
                    name={day?.name}
                    value={day?.name}
                    checked={day.active}
                    onChange={() => onClickDOP(day)}
                />
                <label
                    className="custom-checkbox-label"
                    onClick={() => onClickDOP(day)}  <--------
                >
                    {day?.name}
                </label>
                </li>
            );
            })}
        </ul>
    );