ThreadNet-Web/apps/web/src/components/views/elements/StyledCheckbox.tsx

/*
Copyright 2024,2025 New Vector Ltd.
Copyright 2020 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

import React, { useId, type ReactNode, type Ref } from "react";
import { secureRandomString } from "matrix-js-sdk/src/randomstring";
import { CheckboxInput, Form, HelpMessage, InlineField, Label } from "@vector-im/compound-web";

interface IProps extends React.InputHTMLAttributes<HTMLInputElement> {
    inputRef?: Ref<HTMLInputElement>;
    id?: string;
    description?: ReactNode;
    formWrap?: boolean;
}

const StyledCheckbox: React.FC<IProps> = ({
    id: initialId,
    children: label,
    className,
    inputRef,
    description,
    formWrap = true,
    ...otherProps
}) => {
    const id = initialId || "checkbox_" + secureRandomString(10);
    const name = useId();
    const descriptionId = useId();

    const field = (
        <InlineField
            className={className}
            name={name}
            control={
                <CheckboxInput
                    ref={inputRef}
                    aria-describedby={description ? descriptionId : undefined}
                    id={id}
                    {...otherProps}
                />
            }
        >
            {label && <Label htmlFor={id}>{label}</Label>}
            {description && <HelpMessage id={descriptionId}>{description}</HelpMessage>}
        </InlineField>
    );

    if (formWrap) {
        return <Form.Root>{field}</Form.Root>;
    }

    return field;
};

export default StyledCheckbox;