RadioButton.tsx

import React, { MouseEvent } from 'react';
import { Colors } from '..';
import { Typography } from '../Typography';
import {
  LabelWrapper,
  RadioButtonInput,
  RadioButtonWrapper,
} from './RadioButtonStyle';

export interface RadioButtonProps
  extends Omit<React.HTMLAttributes<HTMLInputElement>, 'onChange'> {
  label?: string;
  helperText?: string;
  disabled?: boolean;
  name?: string;
  checked?: boolean;
  value?: string;
  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
}

/**
 * This is a controlled component, so you need to pass in the `checked` and `onChange` prop to make it work.
 */
export const RadioButton = React.forwardRef<HTMLInputElement, RadioButtonProps>(
  function RadioButton(
    {
      label,
      helperText,
      disabled,
      name,
      checked,
      value,
      onChange,
      ...props
    }: RadioButtonProps,
    ref
  ) {
    return (
      <RadioButtonWrapper>
        <RadioButtonInput
          ref={ref}
          disabled={disabled}
          name={name}
          checked={checked}
          value={value}
          type="radio"
          onChange={onChange}
          onMouseDown={(e: MouseEvent<HTMLInputElement>) => e.preventDefault()}
          {...props}
        />
        <LabelWrapper data-disabled={disabled}>
          <Typography variant="body1" as="span" color={Colors.Neutral.B18}>
            {label}
          </Typography>
          <Typography variant="subtitle2" as="span" color={Colors.Neutral.B40}>
            {helperText}
          </Typography>
        </LabelWrapper>
      </RadioButtonWrapper>
    );
  }
);