Checkbox Component

An input component to indicate yes or no to an option, or to indicate inclusion of an option in a group of options.

Interface

declare namespace Checkbox {
        interface Switch extends React.HTMLAttributes<HTMLDivElement> {
                isChecked: boolean;
        }
        interface Props extends React.HTMLAttributes<HTMLDivElement> {
                Switch: React.FC<Switch>;
                label: string;
                disabled?: boolean;
                initialValue?: boolean;

                onCheckStateChange?(isChecked: boolean): void;
        }
}

Example Implementation

function Checkbox({
        label,
        Switch,
        disabled,
        initialValue,
        onCheckStateChange,
        ...props
}: Checkbox.Props) {
        const [isChecked, setIsChecked] = useState(initialValue || false);
        function changeIsChecked() {
                if (disabled) return;
                setIsChecked(!isChecked);
                onCheckStateChange && onCheckStateChange(!isChecked);
        }
        function onKeyDown(e: React.KeyboardEvent<HTMLDivElement>) {
                const { key } = e;
                if (key === KeyMap.Space) {
                        changeIsChecked();
                }
        }
        return (
                <div
                        role="checkbox"
                        tabIndex={0}
                        aria-checked={isChecked}
                        aria-label={label}
                        onClick={changeIsChecked}
                        onKeyDown={onKeyDown}
                        className={styles.checkbox}
                        {...props}
                >
                        <Switch isChecked={isChecked} />
                </div>
        );
}

Checkbox