HEX

File: //var/www/design.system/src/molecules/Inputs/Checkbox/Checkbox.tsx
import React, { forwardRef, useId } from 'react';
import styles from './Checkbox.module.scss';
import cn from 'classnames';
import Body from '../../../atoms/Typography/Body/Body.tsx';

interface ICheckboxProps extends Omit<React.HTMLAttributes<HTMLInputElement>, 'onChange'> {
  checked: boolean;
  label: string;
  description?: string;
  disabled?: boolean;
  className?: string;
  onChange: (checked: boolean) => void;
}

/**
 * Поддерживает все стандартные пропсы HTMLInputElement.
 *
 * Полную документацию смотрите сайте: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement
 */

const Checkbox = forwardRef<HTMLInputElement, ICheckboxProps>(
  (
    { checked, label, description, disabled, onChange, className, ...rest }: ICheckboxProps,
    ref
  ) => {
    const id = useId();

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
      onChange(e.target.checked);
    };

    return (
      <div
        className={cn(
          styles.root,
          {
            [styles.disabled]: disabled,
          },
          className
        )}
      >
        <input
          ref={ref}
          id={id}
          type="checkbox"
          className={styles.input}
          checked={checked}
          onChange={handleChange}
          disabled={disabled}
          {...rest}
        />
        <label htmlFor={id} className={styles.wrapper}>
          <Body className={styles.label}>{label}</Body>
        </label>
        {description && <Body className={styles.description}>{description}</Body>}
      </div>
    );
  }
);

export default Checkbox;