Checked value for checkbox group

Hi i'm using refine to get a list from db and append it to a checkbox

<Form.Item
              label={t("proposaleComponent.superfoods")}
              name={"superfoods"}
            >
              <Checkbox.Group
                options={superFood}
                value={newOfferingComponent.superfoods}
                onChange={onSuperfoodsChange}
                className="grid grid-cols-3"
              ></Checkbox.Group>
            </Form.Item>

<Form.Item
              label={t("proposaleComponent.superfoods")}
              name={"superfoods"}
            >
              <Checkbox.Group
                options={superFood}
                value={newOfferingComponent.superfoods}
                onChange={onSuperfoodsChange}
                className="grid grid-cols-3"
              ></Checkbox.Group>
            </Form.Item>

here is my code, I want when render, the checkbox group show selected item in a superfoods list from offering component. But it wasn't show. can you help me to show the item that in a list?

3 Replies

kapa.ai•7mo ago

Hi @tandeptraiso1. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To manage the state of your checkbox group in Refine, you can use the useCheckboxGroup hook. This hook allows you to manage an Ant Design Checkbox.Group component when records in a resource need to be used as checkbox options. Here is an example of how to use the useCheckboxGroup hook:

import { useCheckboxGroup } from "@refinedev/antd";  
import { Form, Checkbox } from "antd";  
  
export const PostCreate: React.FC = () => {  
 const { checkboxGroupProps } = useCheckboxGroup<ITag>({  
 resource: "tags",  
 });  
  
 return (  
 <Form>  
 <Form.Item label="Tags" name="tags">  
 <Checkbox.Group {...checkboxGroupProps} />  
 </Form.Item>  
 </Form>  
 );  
};  
  
interface ITag {  
 id: number;  
 title: string;  
}

import { useCheckboxGroup } from "@refinedev/antd";  
import { Form, Checkbox } from "antd";  
  
export const PostCreate: React.FC = () => {  
 const { checkboxGroupProps } = useCheckboxGroup<ITag>({  
 resource: "tags",  
 });  
  
 return (  
 <Form>  
 <Form.Item label="Tags" name="tags">  
 <Checkbox.Group {...checkboxGroupProps} />  
 </Form.Item>  
 </Form>  
 );  
};  
  
interface ITag {  
 id: number;  
 title: string;  
}

In this example, all you have to do is pass the checkboxGroupProps it returns to the <Checkbox.Group> component. useCheckboxGroup uses the useList hook for fetching data. You can also set default values for checkbox fields by passing in defaultValue:

const { selectProps } = useCheckboxGroup({  
 resource: "languages",  
 defaultValue: [1, 2],  
});

const { selectProps } = useCheckboxGroup({  
 resource: "languages",  
 defaultValue: [1, 2],  
});

For more information, refer to the useCheckboxGroup documentation → (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-checkbox-group/) and useList documentation → (https://refine.dev/docs/core/hooks/data/use-list/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•7mo ago

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

unwilling-turquoise•7mo ago

Hello @tandeptraiso1 you can use useCheckboxGroup hook: https://refine.dev/docs/ui-integrations/ant-design/hooks/use-checkbox-group/#usage

useCheckboxGroup | refine

useCheckboxGroup hook allows you to manage an Ant Design Checkbox.Group component when records in a resource needs to be used as checkbox options.