51 lines
1.8 KiB
TypeScript
51 lines
1.8 KiB
TypeScript
import React, { forwardRef, ReactNode } from 'react';
|
|
|
|
type Props<T> = {
|
|
name: string;
|
|
value: T;
|
|
onChange: (e: T) => void;
|
|
options: { label: string; desc?: ReactNode; value: T }[];
|
|
disabled?: boolean;
|
|
error?: string;
|
|
};
|
|
|
|
export const Radio = forwardRef<HTMLInputElement, Props<string | boolean | number | undefined>>(
|
|
({ disabled, onChange, value, options, name, error, ...rest }, ref) => {
|
|
const getId = (label: string) => (name ? `${label}_${name}` : label);
|
|
|
|
return (
|
|
<div>
|
|
{options.map((o) => {
|
|
const checked = value === o.value;
|
|
|
|
return (
|
|
<label
|
|
key={`${getId(o.label)}`}
|
|
htmlFor={getId(o.label)}
|
|
className="custom-control custom-radio">
|
|
<input
|
|
id={getId(o.label)}
|
|
data-testid={o.value}
|
|
type="radio"
|
|
className="custom-control-input"
|
|
onChange={() => onChange(o.value)}
|
|
checked={checked}
|
|
disabled={disabled}
|
|
ref={ref}
|
|
{...rest}
|
|
/>
|
|
|
|
<span className="custom-control-label">{o.label}</span>
|
|
|
|
{o.desc && <span className="checkbox__label-subtitle">{o.desc}</span>}
|
|
</label>
|
|
);
|
|
})}
|
|
{!disabled && error && <span className="form__message form__message--error">{error}</span>}
|
|
</div>
|
|
);
|
|
},
|
|
);
|
|
|
|
Radio.displayName = 'Radio';
|