diff --git a/docs/RadioButtonGroupInput.md b/docs/RadioButtonGroupInput.md index bf481c66868..36c649cf67d 100644 --- a/docs/RadioButtonGroupInput.md +++ b/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 }, +]; + +``` + The choices are translated by default, so you can use translation identifiers as choices: ```jsx @@ -390,4 +401,4 @@ const CompanyInput = () => ( This is the recommended approach for using `` to select a foreign key. This not only signifies that the input is a `` but also highlights its function in fetching choices from another resource, ultimately enhancing the code's readability. -**Tip**: `` 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 ``. `` can provide choices to ``, but also to [``](./AutocompleteInput.md) and [``](./SelectInput.md). For further information, refer to [the `` documentation](./ReferenceInput.md). \ No newline at end of file +**Tip**: `` 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 ``. `` can provide choices to ``, but also to [``](./AutocompleteInput.md) and [``](./SelectInput.md). For further information, refer to [the `` documentation](./ReferenceInput.md). diff --git a/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.stories.tsx b/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.stories.tsx index 09c483ce6fe..6e840914eff 100644 --- a/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.stories.tsx +++ b/packages/ra-ui-materialui/src/input/RadioButtonGroupInput.stories.tsx @@ -278,6 +278,28 @@ export const TranslateChoice = () => { ); }; +export const DisabledChoice = () => ( + + + +); + export const Themed = () => ( } {...sanitizeInputRestProps(rest)} />