R
Refine

ask-any-question

Checked value for checkbox group

Ffair-rose1/3/2024
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?
Kkapa.ai1/3/2024
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: ----------------------
Kkapa.ai1/3/2024
<@369510721135837184> kapa.ai is still learning and improving, please let us know how it did by reacting below
Pplain-purple1/4/2024
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.

Looking for more? Join the community!

R
Refine

ask-any-question

Join Server