A11y code example

accessible-radio-button.jsx

export const InvisibleInput = styled.input`
  opacity: 0;
  position: absolute;
  cursor: pointer;

  &:focus + ${RadioButton} {
    box-shadow: 0 0 0 2px ${theme.colors.white},
      0px 0px 0px 4px ${tint(0.35, theme.colors.teal)};
  }
`;

export const RadioInput = ({
  selected,
  onClick,
  label,
  radioRight,
  className,
}: Props) => (
  <RadioWrapper className={className} align="center" mb={[2]}>
    <Label radioRight={radioRight}>
      <InvisibleInput
        type="radio"
        value={label}
        onChange={onClick}
        checked={selected}
        autoFocus={selected}
      />
      <RadioButton>{selected && <SelectedCircle />}</RadioButton>
      <Box ml={radioRight ? 0 : 2}>{label}</Box>
    </Label>
  </RadioWrapper>
)