Checkbox.tsx

import * as RadixCheckbox from '@radix-ui/react-checkbox';
import { useId } from 'react';

import CheckmarkIcon from '@components/icons/Checkmark';

import styles from './Checkbox.module.scss';

type CheckboxProps = {
    label?: string;
    id?: string;
} & RadixCheckbox.CheckboxProps;

const Checkbox = (props: CheckboxProps) => {
    const generatedId = useId();
    const { label, id = `checkbox-${generatedId}`, checked, onCheckedChange, required = false, disabled = false, name, value } = props;

    return (
        <div className={styles.container}>
            <RadixCheckbox.Root
                className={styles.root}
                checked={checked}
                onCheckedChange={onCheckedChange}
                id={id}
                required={required}
                disabled={disabled}
                name={name}
                value={value}
            >
                <RadixCheckbox.Indicator className={styles.indicator}>
                    {disabled ? <CheckmarkIcon className={styles.disabledIcon} /> : <CheckmarkIcon />}
                </RadixCheckbox.Indicator>
            </RadixCheckbox.Root>
            {label && (
                <label className={styles.label} htmlFor={id}>
                    {label}
                </label>
            )}
        </div>
    );
};

export default Checkbox;