message: Adjust radio component for form
diff: @@ -4,9 +4,11 @@ import { makeid } from 'libs/string';
  export type RadioAlign = 'left' | 'right';
  +type RadioValue = string | number;
  +
  export interface Option {
  text: React.ReactNode;
  - value: string | number;
  + value: RadioValue;
  disabled?: boolean;
  }
  @@ -15,23 +17,15 @@ export interface Props {
  radioAlign?: RadioAlign;
  textClass?: string;
  textStyle?: React.CSSProperties;
  - onChange?: (value: string) => void;
  - value?: string | number;
  + onChange?: (e?: any) => void;
  + value?: RadioValue;
  options?: Option[];
  + name?: string;
  }
  -// name attribute makes it grouped ones
  -
  -export const Radio: React.FC<Props> = ({
  - className,
  - radioAlign = 'left',
  - textClass = '',
  - textStyle,
  - onChange,
  - value,
  - options,
  -}) => {
  - const name = React.useMemo(() => makeid(), []);
  +export const Radio = React.forwardRef<HTMLInputElement, Props>(
  + ({ className, radioAlign = 'left', textClass = '', textStyle, options, value, onChange, ...props }, ref) => {
  + const name = props.name || React.useMemo(() => makeid(), []);
  const onChangeHandler = ({ target }: React.ChangeEvent<HTMLInputElement>): void => {
  if (onChange !== undefined) {
  @@ -51,9 +45,10 @@ export const Radio: React.FC<Props> = ({
  return (
  <div className={cn(`ebs-radio__group`, `ebs-radio__align--${radioAlign}`, className)}>
  - {options.map((option) => (
  - <div className={cn(`ebs-radio__wrapper`, { 'has-text': option.text, disabled: option.disabled })}>
  + {options.map((option, idx) => (
  + <div key={idx} className={cn(`ebs-radio__wrapper`, { 'has-text': option.text, disabled: option.disabled })}>
  <input
  + ref={ref}
  type="radio"
  className="ebs-radio__input"
  name={name}
  @@ -79,4 +74,5 @@ export const Radio: React.FC<Props> = ({
  ))}
  </div>
  );
  -};
  + },
  +);
  