add demo & return interface

docs/src/pages/components/radio-buttons/UseRadioGroup.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import RadioGroup, { useRadioGroup } from '@material-ui/core/RadioGroup';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import Radio from '@material-ui/core/Radio';
+import PropTypes from 'prop-types';
+
+const useStyles = makeStyles((theme) => ({
+  labelChecked: {
+    color: theme.palette.secondary.main,
+    fontWeight: 'bold',
+    textDecoration: 'underline',
+  },
+}));
+
+const MyFormControlLabel = (props) => {
+  const classes = useStyles();
+
+  const radioGroup = useRadioGroup();
+
+  let checked = false;
+
+  if (radioGroup) {
+    checked = radioGroup.value === props.value;
+  }
+
+  return (
+    <FormControlLabel
+      classes={{
+        label: checked ? classes.labelChecked : '',
+      }}
+      {...props}
+    />
+  );
+};
+
+MyFormControlLabel.propTypes = {
+  value: PropTypes.string.isRequired,
+};
+
+export default function UseRadioGroup() {
+  return (
+    <RadioGroup defaultValue="first">
+      <MyFormControlLabel value="first" label="First" control={<Radio />} />
+      <MyFormControlLabel value="second" label="Second" control={<Radio />} />
+    </RadioGroup>
+  );
+}

docs/src/pages/components/radio-buttons/UseRadioGroup.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import RadioGroup, { useRadioGroup } from '@material-ui/core/RadioGroup';
+import FormControlLabel, {
+  FormControlLabelProps,
+} from '@material-ui/core/FormControlLabel';
+import Radio from '@material-ui/core/Radio';
+
+const useStyles = makeStyles((theme) => ({
+  labelChecked: {
+    color: theme.palette.secondary.main,
+    fontWeight: 'bold',
+    textDecoration: 'underline',
+  },
+}));
+
+const MyFormControlLabel = (props: FormControlLabelProps) => {
+  const classes = useStyles();
+
+  const radioGroup = useRadioGroup();
+
+  let checked = false;
+
+  if (radioGroup) {
+    checked = radioGroup.value === props.value;
+  }
+
+  return (
+    <FormControlLabel
+      classes={{
+        label: checked ? classes.labelChecked : '',
+      }}
+      {...props}
+    />
+  );
+};
+
+export default function UseRadioGroup() {
+  return (
+    <RadioGroup defaultValue="first">
+      <MyFormControlLabel value="first" label="First" control={<Radio />} />
+
+      <MyFormControlLabel value="second" label="Second" control={<Radio />} />
+    </RadioGroup>
+  );
+}

docs/src/pages/components/radio-buttons/radio-buttons.md

@@ -51,9 +51,15 @@ For advanced customization use cases, we expose a `useRadioGroup()` hook.
 It returns the context value of RadioGroupContext.
 The Radio component uses this hook internally.
 
-```jsx
-import { useRadioGroup } from '@material-ui/core/RadioGroup';
-```
+#### Returns
+
+`value` (_Object_):
+
+- `value.name` (_String_ [optional]): The name used to reference the value of the control.
+- `value.onChange` (_Void_ [optional]): Callback fired when a radio button is selected.
+- `value.value` (_Any_ [optional]): Value of the selected radio button.
+
+{{"demo": "pages/components/radio-buttons/UseRadioGroup.js"}}
 
 ## When to use