Files
react-test/docs/data/material/components/radio-buttons/UseRadioGroup.js
how2ice 005cf56baf
Some checks failed
No response / noResponse (push) Has been cancelled
CI / Continuous releases (push) Has been cancelled
CI / test-dev (macos-latest) (push) Has been cancelled
CI / test-dev (ubuntu-latest) (push) Has been cancelled
CI / test-dev (windows-latest) (push) Has been cancelled
Maintenance / main (push) Has been cancelled
Scorecards supply-chain security / Scorecards analysis (push) Has been cancelled
CodeQL / Analyze (push) Has been cancelled
init project
2025-12-12 14:26:25 +09:00

49 lines
1.2 KiB
JavaScript

import { styled } from '@mui/material/styles';
import PropTypes from 'prop-types';
import RadioGroup, { useRadioGroup } from '@mui/material/RadioGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import Radio from '@mui/material/Radio';
const StyledFormControlLabel = styled((props) => <FormControlLabel {...props} />)(
({ theme }) => ({
variants: [
{
props: { checked: true },
style: {
'.MuiFormControlLabel-label': {
color: theme.palette.primary.main,
},
},
},
],
}),
);
function MyFormControlLabel(props) {
const radioGroup = useRadioGroup();
let checked = false;
if (radioGroup) {
checked = radioGroup.value === props.value;
}
return <StyledFormControlLabel checked={checked} {...props} />;
}
MyFormControlLabel.propTypes = {
/**
* The value of the component.
*/
value: PropTypes.any,
};
export default function UseRadioGroup() {
return (
<RadioGroup name="use-radio-group" defaultValue="first">
<MyFormControlLabel value="first" label="First" control={<Radio />} />
<MyFormControlLabel value="second" label="Second" control={<Radio />} />
</RadioGroup>
);
}