radio

FirstStep.tsx

<FormControl required component="fieldset">
        <Field component={RadioGroup} row name="amount"> 
          <FormControlLabel
            className={status === '2' ? classes.checked : classes.button}
            value="2"
            control={
              <Radio
                sx={{ '& .MuiSvgIcon-root': { fontSize: 39 }, marginRight: 5 }}
                icon={<CircleOutlinedIcon />}
                checkedIcon={<CheckCircleIcon color="info" />}
              />
            }
            label={<span style={{ fontSize: '20px' }}>2 лв.</span>}
          />
          <FormControlLabel
            className={status === '20' ? classes.checked : classes.button}
            value="20"
            control={
              <Radio
                sx={{ '& .MuiSvgIcon-root': { fontSize: 39 }, marginRight: 5 }}
                icon={<CircleOutlinedIcon />}
                checkedIcon={<CheckCircleIcon color="info" />}
              />
            }
            label={<span style={{ fontSize: '20px' }}>20 лв.</span>}
          />
          <FormControlLabel
            className={status === '5' ? classes.checked : classes.button}
            value="5"
            control={
              <Radio
                sx={{ '& .MuiSvgIcon-root': { fontSize: 39 }, marginRight: 5 }}
                icon={<CircleOutlinedIcon />}
                checkedIcon={<CheckCircleIcon color="info" />}
              />
            }
            label={<span style={{ fontSize: '20px' }}>5 лв.</span>}
          />
          <FormControlLabel
            className={status === '50' ? classes.checked : classes.button}
            value="50"
            control={
              <Radio
                sx={{ '& .MuiSvgIcon-root': { fontSize: 39 }, marginRight: 5 }}
                icon={<CircleOutlinedIcon />}
                checkedIcon={<CheckCircleIcon color="info" />}
              />
            }
            label={<span style={{ fontSize: '20px' }}>50 лв.</span>}
          />
          <FormControlLabel
            className={status === '10' ? classes.checked : classes.button}
            value="10"
            control={
              <Radio
                sx={{ '& .MuiSvgIcon-root': { fontSize: 39 }, marginRight: 5 }}
                icon={<CircleOutlinedIcon />}
                checkedIcon={<CheckCircleIcon color="info" />}
              />
            }
            label={<span style={{ fontSize: '20px' }}>10 лв.</span>}
          />
          <FormControlLabel
            className={status === '100' ? classes.checked : classes.button}
            value="100"
            control={
              <Radio
                sx={{ '& .MuiSvgIcon-root': { fontSize: 39 }, marginRight: 5 }}
                icon={<CircleOutlinedIcon />}
                checkedIcon={<CheckCircleIcon color="info" />}
              />
            }
            label={<span style={{ fontSize: '20px' }}>100 лв.</span>}
          />
        </Field>
      </FormControl>