Add disable support for RadioButtonGroupInput choices

Author: WiXSL

docs/RadioButtonGroupInput.md

@@ -94,6 +94,17 @@ const choices = [
 />
 ```
 
+You can render some options as disabled by setting the `disabled` field in some choices:
+
+```jsx
+const choices = [
+    { id: 'tech', name: 'Tech' },
+    { id: 'lifestyle', name: 'Lifestyle' },
+    { id: 'people', name: 'People', disabled: true },
+];
+<RadioButtonGroupInput source="category" choices={choices} />
+```
+
 The choices are translated by default, so you can use translation identifiers as choices:
 
 ```jsx
@@ -388,4 +399,4 @@ const CompanyInput = () => (
 
 This is the recommended approach for using `<RadioButtonGroupInput>` to select a foreign key. This not only signifies that the input is a `<RadioButtonGroupInput>` but also highlights its function in fetching choices from another resource, ultimately enhancing the code's readability.
 
-**Tip**: `<ReferenceInput>` is much more powerful than the initial snippet. It optimizes and caches API calls, enables refetching of both API calls with a single command, and stores supplementary data in the `<ChoicesContext>`. `<ReferenceInput>` can provide choices to `<RadioButtonGroupInput>`, but also to [`<AutocompleteInput>`](./AutocompleteInput.md) and [`<SelectInput>`](./SelectInput.md). For further information, refer to [the `<ReferenceInput>` documentation](./ReferenceInput.md).
+**Tip**: `<ReferenceInput>` is much more powerful than the initial snippet. It optimizes and caches API calls, enables refetching of both API calls with a single command, and stores supplementary data in the `<ChoicesContext>`. `<ReferenceInput>` can provide choices to `<RadioButtonGroupInput>`, but also to [`<AutocompleteInput>`](./AutocompleteInput.md) and [`<SelectInput>`](./SelectInput.md). For further information, refer to [the `<ReferenceInput>` documentation](./ReferenceInput.md).

packages/ra-ui-materialui/src/input/RadioButtonGroupInput.stories.tsx

@@ -272,3 +272,13 @@ export const TranslateChoice = () => {
         </AdminContext>
     );
 };
+
+export const DisabledChoice = () => (
+    <Wrapper>
+        <RadioButtonGroupInput source="category" choices={[
+            { id: 'tech', name: 'Tech', details: 'Tech details' },
+            { id: 'lifestyle', name: 'Lifestyle', details: 'Lifestyle details' },
+            { id: 'people', name: 'People', details: 'People details', disabled: true },
+        ]} />
+    </Wrapper>
+);

packages/ra-ui-materialui/src/input/RadioButtonGroupInputItem.tsx

@@ -10,13 +10,14 @@ export const RadioButtonGroupInputItem = ({
     source,
     translateChoice,
 }) => {
-    const { getChoiceText, getChoiceValue } = useChoices({
+    const { getChoiceText, getChoiceValue, getDisableValue } = useChoices({
         optionText,
         optionValue,
         translateChoice,
     });
     const label = getChoiceText(choice);
     const value = getChoiceValue(choice);
+    const disabled = getDisableValue(choice);
 
     const nodeId = `${source}_${value}`;
 
@@ -25,6 +26,7 @@ export const RadioButtonGroupInputItem = ({
             label={label}
             htmlFor={nodeId}
             value={value}
+            disabled={disabled}
             control={<Radio id={nodeId} color="primary" />}
         />
     );