When you hide an interactive element, make sure you choose a hiding technique that keeps it screen reader-accessible, position it on top of whatever is visually replacing it so that a user navigating by touch can find it where they expect to, and then make it transparent.

Learn to create custom, cross-browser, theme-able, scalable radio buttons in pure CSS and ensuring styles remain accessible across states.

Also checkboxes:
https://moderncss.dev/pure-css-custom-checkbox-style/

https://www.sarasoueidan.com/blog/inclusively-hiding-and-styling-checkboxes-and-radio-buttons/

Checkboxes are the worst
But I'm here to help make them better.

Here's an approach I use to always perfectly center them with the first line of text, no matter the text length or size

I like to use checkboxes as buttons. And here’s how.

A checkbox is a binary state. It is checked or not. So instead of reading out the state in an event handler, I tend to read the checked property.

• The .prop() method gets the property value for only the first element in the matched set.

• $( elem ).prop( "checked" ) true (Boolean) Will change with checkbox state

• $( elem ).attr( "checked" ) (1.6+) "checked" (String) Initial state of the checkbox; does not change

According to the W3C forms specification, the checked attribute is a boolean attribute, which means the corresponding property is true if the attribute is present at all—even if, for example, the attribute has no value or is set to empty string value or even "false". This is true of all boolean attributes.