Radio Button background and checked

Question

Thanks in advance for your help.

Basically I want to implement a radio button that when it is not checked, it appears as a white circle. And if it is checked it is preferably only the filled (without margin or outline) or the standard

Answer 1

You can use radial-gradient() to customize the color of the inner circle when the radio is checked. Here is an example

const useStyles = makeStyles({
  root: {
    "&:hover": {
      backgroundColor: "transparent"
    }
  },
  icon: {
    width: 16,
    height: 16,
    boxShadow: "inset 0 0 0 1px #f4f4f4, inset 0 -1px 0 #f4f4f4",
    borderRadius: "50%",
    backgroundColor: "white",
    "input:hover ~ &": {
      backgroundColor: "#ebf1f5"
    },
    "input:disabled ~ &": {
      boxShadow: "none",
      background: "rgba(206,217,224,.5)"
    }
  },
  checkedIcon: {
    "&:before": {
      boxShadow: "inset 0 0 0 1px #f4f4f4, inset 0 -1px 0 #f4f4f4",
      borderRadius: "50%",
      display: "block",
      width: 16,
      height: 16,
      backgroundImage: "radial-gradient(#b33bdd,#b33bdd 47%,white 47%)",
      content: '""'
    },
  }
});

Usage

function StyledRadio(props) {
  const classes = useStyles();

  return (
    <Radio
      className={classes.root}
      disableRipple
      color="default"
      checkedIcon={<span className={clsx(classes.icon, classes.checkedIcon)} />}
      icon={<span className={classes.icon} />}
      {...props}
    />
  );
}

...

<FormControlLabel
  value="female"
  control={<StyledRadio />}
  label="Female"
/>

Live Demo