diff --git a/src/components/FormRenderer/components/Radio/index.tsx b/src/components/FormRenderer/components/Radio/index.tsx index 9a1e5414..633e176e 100644 --- a/src/components/FormRenderer/components/Radio/index.tsx +++ b/src/components/FormRenderer/components/Radio/index.tsx @@ -24,12 +24,13 @@ import { getErrorText } from '../../utils/getErrorText'; interface RadioButtonMappingProps { option: Option; name: string; + description?: string; } -const RadioButtonMapping: FunctionComponent = ({ option, name }) => { - const { input } = useFieldApi({ name, type: 'radio', value: option.value }); +const RadioButtonMapping: FunctionComponent = ({ option, name, description }) => { + const { input } = useFieldApi({ description, name, type: 'radio', value: option.value }); return ( - + {option.label} ); @@ -61,7 +62,12 @@ const RadioGroupMapping: FunctionComponent = (props) => { ( - + ))} /> diff --git a/src/components/FormRenderer/index.stories.tsx b/src/components/FormRenderer/index.stories.tsx index 6ca4dd4b..778ffd91 100644 --- a/src/components/FormRenderer/index.stories.tsx +++ b/src/components/FormRenderer/index.stories.tsx @@ -147,6 +147,7 @@ const baseSchema = { options: [ { label: 'Option 1', + description: 'Description 1', value: '1', }, { diff --git a/src/components/FormRenderer/index.test.tsx b/src/components/FormRenderer/index.test.tsx index c3812130..e10be219 100644 --- a/src/components/FormRenderer/index.test.tsx +++ b/src/components/FormRenderer/index.test.tsx @@ -756,6 +756,7 @@ describe('FormRenderer', () => { options: [ { label: 'Option 1', + description: 'Description 1', value: '1', }, { @@ -783,6 +784,7 @@ describe('FormRenderer', () => { expect(getByText('Radio')).toBeVisible(); expect(getAllByRole('radio')).toHaveLength(3); + expect(getByText('Description 1')).toBeVisible(); fireEvent.click(getByLabelText('Option 3')); fireEvent.click(getByText('Submit')); diff --git a/src/components/FormRenderer/types.ts b/src/components/FormRenderer/types.ts index 0d4369a5..56c265d5 100644 --- a/src/components/FormRenderer/types.ts +++ b/src/components/FormRenderer/types.ts @@ -20,6 +20,7 @@ import { FormTemplateRenderProps } from '@data-driven-forms/react-form-renderer/ export interface Option { label: string; value: string; + description: string; disabled?: boolean; }