Radio button which looks like button

RadioButton.jsx

import React from 'react';
import { string } from 'prop-types';
import styled from 'styled-components';

import { getThemeColor } from 'utils/theme';

const Label = styled.label`
    padding: 12px 20px;
    display:block;
    cursor: pointer;
    text-align: center;
    border-radius: 4px;
    background-color: ${getThemeColor(['cloudLight'])};    
`;

const HiddenInput = styled.input.attrs({ type: 'radio' })`
    position: absolute;
    clip: rect(0,0,0,0);
    pointer-events: none;
    
    &:checked ~ ${Label} {
        background-color: ${getThemeColor(['inkLighter'])};
        color: ${getThemeColor(['white'])};
    }
`;

const RadioButton = ({ label, id, ...props }) => (
    <div>
        <HiddenInput {...{ id }} {...props} />
        <Label htmlFor={id}>{label}</Label>
    </div>
);

RadioButton.propTypes = {
    label: string.isRequired,
    id: string.isRequired,
};

export default RadioButton;