I have a custom radio button component and I would like to group them somehow. Selecting one de-selects another I have to detect the selection of the one and deselect the other one, so the question is where I do that? It has to be done somewhere but the mechanic is always the same. Any recommendations?
Here's how my component looks like:
const StyledRadio = styled.div<RadioProps>`
display: flex;
background: ${(p) =>
!p.checked
? "transparent"
: "radial-gradient(#34515E 0%, #34515E 50%, transparent 50%, transparent)"};
border-radius: 50%;
border: ${(p) => `2px solid ${theme.color.secondary}`};
height: ${(p) => `${radioSizes[p.size]}px`};
margin-right: 5px;
opacity: ${(p) => (p.disabled ? 0.5 : 1)};
width: ${(p) => `${radioSizes[p.size]}px`};
&:hover {
cursor: pointer;
background: radial-gradient(
circle,
#34515e 0%,
#34515e 50%,
transparent 50%,
transparent
);
transform: scale (1.02);
display: block;
}
&:active {
transform: scale(1.1);
}
`;
const RadioLabel = styled.label<{ size: string }>`
color: ${theme.color.secondary};
cursor: pointer;
display: flex;
flex-direction: row-reverse;
font-size: ${theme.font.size.small};
`;
type RadioProps = {
checked?: boolean;
children?: any;
disabled?: boolean;
label?: string;
onClick?: (value?: any) => void;
size?: RadioSize;
value?: any;
};
export const Radio: FC<RadioProps> = ({
disabled = false,
onClick,
children,
checked,
label = "",
value,
size = "small",
...rest
}) => {
return (
<RadioGroup
disabled = {!!disabled}
onClick = {() => (!disabled && onClick ? onClick(value) : null)}
>
<StyledRadio
{...rest}
disabled = {disabled}
size = {size}
checked = {checked}
/>
<RadioLabel size={size}>{label}</RadioLabel>
</RadioGroup>
);
};