Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 12 additions & 1 deletion docs/RadioButtonGroupInput.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -390,4 +401,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).
Original file line number Diff line number Diff line change
Expand Up @@ -278,6 +278,28 @@ export const TranslateChoice = () => {
);
};

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>
);

export const Themed = () => (
<Wrapper
theme={createTheme({
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,13 +25,14 @@ export const RadioButtonGroupInputItem = (
name: PREFIX,
});

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}`;

Expand All @@ -40,6 +41,7 @@ export const RadioButtonGroupInputItem = (
label={label}
htmlFor={nodeId}
value={value}
disabled={disabled}
control={<Radio id={nodeId} color="primary" />}
{...sanitizeInputRestProps(rest)}
/>
Expand Down
Loading