getValueProps

How to get value from a radio group on edit page

2 Replies

Hi @Sly. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To get the value from a radio group on an edit page in a Refine application using Ant Design, you can use the useRadioGroup hook. This hook helps manage the state and properties of an Ant Design Radio.Group component. Below is an example of how you can set this up: 1. Import the necessary modules:

   import { useRadioGroup } from "@refinedev/antd";  
   import { Form, Radio } from "antd";

   import { useRadioGroup } from "@refinedev/antd";  
   import { Form, Radio } from "antd";

2. Use the useRadioGroup hook:

   const { radioGroupProps } = useRadioGroup<ILanguage>({  
     resource: "languages",  
   });

   const { radioGroupProps } = useRadioGroup<ILanguage>({  
     resource: "languages",  
   });

3. Set up the form with the Radio.Group component:

   export const PostEdit = () => {  
     return (  
       <Form>  
         <Form.Item label="Languages" name="languages">  
           <Radio.Group {...radioGroupProps} />  
         </Form.Item>  
       </Form>  
     );  
   };  
   
   interface ILanguage {  
     id: number;  
     title: string;  
   }

   export const PostEdit = () => {  
     return (  
       <Form>  
         <Form.Item label="Languages" name="languages">  
           <Radio.Group {...radioGroupProps} />  
         </Form.Item>  
       </Form>  
     );  
   };  
   
   interface ILanguage {  
     id: number;  
     title: string;  
   }

In this example, the useRadioGroup hook fetches data from the languages resource and provides the necessary props for the Radio.Group component. When you use this setup on an edit page, the selected value will be managed by the form's state. For more detailed information, you can refer to the useRadioGroup documentation (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-radio-group/). Additional Options You can also customize the behavior and appearance of the radio group using additional options like defaultValue, optionLabel, optionValue, and queryOptions. Here is an example with some of these options:

const { radioGroupProps } = useRadioGroup({  
  resource: "languages",  
  defaultValue: 1,  
  optionLabel: "title",  
  optionValue: "id",  
  queryOptions: {  
    onError: () => {  
      console.log("triggers when on query return Error");  
    },  
  },  
});

const { radioGroupProps } = useRadioGroup({  
  resource: "languages",  
  defaultValue: 1,  
  optionLabel: "title",  
  optionValue: "id",  
  queryOptions: {  
    onError: () => {  
      console.log("triggers when on query return Error");  
    },  
  },  
});

For more information on these options, you can refer to the following sections in the documentation: - Options (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-radio-group/#options) - API Reference (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-radio-group/#api-reference) By following these steps, you can effectively manage and retrieve the value from a radio group on an edit page in your Refine application. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

<@1172098337760096258> kapa.ai is still learning and improving, please let us know how it did by reacting below