How to allow grouping radio buttons when you can't use the name attribute?

Viewed 31

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>
  );
};
0 Answers
Related