Radio Buttons with own labels/components (Material UI) - material-ui

Question

I would like to have my own component for my specific radio button. But the component doesn't render correctly.
I have a RadioGroup like this:
const SampleComp = (props : MyProps) => {
return <RadioGroup
defaultValue="AllTime"
name="Filter"
>
<FormControlLabel value="AllTime" control={<Radio />} label="All time" />
<FormControlLabel value="TestLabel" control={<Radio />} label={<TestLabel/>} />
</RadioGroup>
}
And I have a Testlabel to show a select component:
const TestLabel = () => {
return <FormControl fullWidth variant={'outlined'}>
<InputLabel id="demo-simple-select-label">Long text for label</InputLabel>
<Select
labelId="myField"
id="myField"
label="Long text for label"
onChange={handleChange}
>{[0, 1, 2, 3, 4, 5, 6].map(s => <MenuItem key={s} value={s}>{'value ' + s}</MenuItem>)}
</Select>
</FormControl>
}
In the end it looks like this:
I expected something like this:
Question: How can I render my component correctly when using in combination with a radio button? Or should this be done differently?

Answer 1

I messed around trying to get something to work but it doesn't look possible + the docs for FormControlLabel say it should take A control element. For instance, it can be a Radio, a Switch or a Checkbox.
It looks like you need to render a RadioGroup with an 'other' option and then either dynamically render or undisable a dropdown underneath the RadioGroup to achieve the behaviour you're after.
const SampleComp = () => {
const [selectedRadioValue, setSelectedRadioValue] = useState('AllTime')
const [selectedMenuItem, setSelectedMenuItem] = useState<string>()
return (
<>
<RadioGroup
value={selectedRadioValue}
name="Filter"
onChange={(_event, newValue) => setSelectedRadioValue(newValue)}
>
<FormControlLabel value="AllTime" control={<Radio />} label="All time" />
<FormControlLabel value="Other" control={<Radio />} label="Other" />
</RadioGroup>
<TextField
disabled={selectedRadioValue !== 'Other'}
label="Long text for label"
value={selectedMenuItem}
onChange={(event) => setSelectedMenuItem(event.target.value)}
fullWidth
select
>
{[0, 1, 2, 3, 4, 5, 6].map((s) => (
<MenuItem key={s} value={s}>
{'value ' + s}
</MenuItem>
))}
</TextField>
</>
)
}