Why does radio button only take the first FormControlLabel
Like in this example
<FormControl component="fieldset">
<FormHelperText
sx={{
fontWeight: 500,
margin: "10px 0",
fontSize: 16,
color: "#11142d",
}}
>
Lesson status
</FormHelperText>
<RadioGroup
row
aria-labelledby="demo-radio-buttons-group-label"
name="use-radio-group"
{...register("status", { required: true })}
>
<FormControlLabel
value="Active"
control={<Radio />}
label="Active"
/>
<FormControlLabel
value="Pending"
control={<Radio />}
label="Pending"
/>
<FormControlLabel
value="Inactive"
control={<Radio />}
label="Inactive"
/>
</RadioGroup>
</FormControl>
i cna only submit my form if the first FormControlLabel is ticked "Active" and when i click "pending" it didn't go through like cannot submit
2 Replies
Hi @Luckman. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Hmm, I don't know enough to give you a confident answer yet. The extracts provided do not contain information about handling radio buttons in a form or issues related to only the first
FormControlLabel being accepted.
However, it's important to ensure that your form handling logic correctly processes the value from the RadioGroup and that the register function from your form library (like react-hook-form) is properly implemented.
For more detailed information, you might want to check the official documentation or relevant resources.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@386531590395789313> kapa.ai is still learning and improving, please let us know how it did by reacting below