styled-components

import React, { FC, ChangeEvent } from 'react';
import styled from 'styled-components';

interface CheckboxInputProps {
  label: React.ReactNode;
  onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
  bodySRegular?: boolean;
  bodyMBold?: boolean;
  checked?: boolean;
}

const StyledCheckboxInput = styled.label`
  display: grid;
  grid-template-columns: 1rem auto;
  gap: 1rem;
  cursor: pointer;
  align-items: center;

  input[type='checkbox'] {
    -webkit-appearance: none;
    appearance: none;
    background-color: none;
    margin: 0;
    width: 1rem;
    height: 1rem;
    border: 1px solid var(--gray500);
    transform: translateY(-0.075em);
    display: grid;
    place-content: center;
  }

  input[type='checkbox']::before {
    content: '';
    width: 0.60375rem;
    height: 0.60375rem;
    transform: scale(0);
    transition: 120ms transform ease-in-out;
    box-shadow: inset 1em 1em var(--primary);
  }

  input[type='checkbox']:checked::before {
    transform: scale(1);
  }
`;

const CheckboxInput: FC<CheckboxInputProps> = ({ label, onChange, bodySRegular, bodyMBold, checked }) => {
  let className = ['checkbox-control'];
  if (bodySRegular) className.push('body-s-regular');
  if (bodyMBold) className.push('body-m-bold');

  return (
    <StyledCheckboxInput className={className.join(' ')}>
      <input type="checkbox" name="checkbox" onChange={onChange} checked={checked} />
      {label}
    </StyledCheckboxInput>
  );
};

export default CheckboxInput;

TailwindCSS

export interface CheckboxProps {
  disabled?: boolean;
  defaultChecked?: boolean;
  id: string;
  label: string;
}

const Checkbox = (props: CheckboxProps) => (
  <label className="w-full flex gap-2 cursor-pointer" htmlFor={props.id}>
    <input
      className="
          peer relative appearance-none shrink-0 w-4 h-4 border-2 border-blue-200 rounded-sm mt-1 bg-white
          focus:outline-none focus:ring-offset-0 focus:ring-1 focus:ring-blue-100
          checked:bg-blue-500 checked:border-0
          disabled:border-steel-400 disabled:bg-steel-400
        "
      type="checkbox"
      {...props}
    />
    <svg
      className="absolute w-4 h-4 pointer-events-none hidden peer-checked:block stroke-white mt-1 outline-none"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="4"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <polyline points="20 6 9 17 4 12"></polyline>
    </svg>
    {props.label}
  </label>
);

export default Checkbox;