I have developed a reusable Radio group component, and I am using styled components to style it.
The goal is to position the dot right in the center of the circle, and it is somewhat achieving that in the screenshot below:
https://i.sstatic.net/Kistg.png
However, it seems like the positioning is slightly off to the bottom and right.
Moreover, I believe there is room for improvement in the styling:
import { StyledRadioButton, Radio, Wrapper } from './radio-button.styles';
...
return (
<Wrapper>
<Radio type="radio" id={id} disabled={disabled} {...rest} />
<StyledRadioButton htmlFor={id}>{label}</StyledRadioButton>
</Wrapper>
);
Styled:
export const Wrapper = styled.div`
display: flex;
gap: 1rem;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
align-items: center;
`;
export const Radio = styled.input`
-webkit-appearance: none;
appearance: none;
margin: 0;
width: 1.5em;
height: 1.5em;
border: 1px solid grey;
font-size: 16px;
font-style: normal;
border-radius: 50%;
cursor: pointer;
transition: all 0.1s ease-in-out;
::after {
content: '';
display: block;
border-radius: 50%;
width: 0.75em;
height: 0.75em;
margin: 4.26px; // this is the tweak to position it into the center
}
:checked {
::after {
background-color: green;
}
border: 1px solid green;
}
border: 1px solid grey;
`;
export const StyledRadioButton = styled.label<{ disabled?: boolean }>`
font-weight: 400;
font-size: 16pc;
color: black;
`;