I am using react styled components as styling in my project ok let me point out what actually i am feeling not right is the text between the box and also need to style it if it is checked

what i have tried ?

I craeted a outer div and inside it i put radio input which i display none and thought i can style the outer element but that make the radio button not clickable any solution to this problem if you present react specific solution will be great.

```css
.radio__input{
  display:none;
}

.radiobox{
  width:60px;
  height:60px;
  border:1px solid black;
}
```

```html
//i want the div radiobox to styled when one radiobox is selected

<div class="radiobox">
  <input type="radio" class="radio__input" name="radio"/>
  XS
</div>
<div class="radiobox">
  <input type="radio" class="radio__input" name="radio"/>
  S
</div>
```

[![enter image description here](https://i.stack.imgur.com/twwD4.png)](https://i.stack.imgur.com/twwD4.png)