useCheckboxGroup

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

Usage

We will demonstrate how to get data at the /tags endpoint from the https://api.fake-rest.refine.dev REST API.

https://api.fake-rest.refine.dev/tags

{
    [
        {
            id: 1,
            title: "Driver Deposit",
        },
        {
            id: 2,
            title: "Index Compatible Synergistic",
        },
        {
            id: 3,
            title: "Plum",
        },
    ];
}

pages/posts/create.tsx

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

All we have to do is pass the checkboxGroupProps it returns to the <Checkbox.Group> component. useCheckboxGroup uses the useList hook for fetching data. Refer to useList hook for details. &#8594

Options

resource

const { checkboxGroupProps } = useCheckboxGroup({
    resource: "tags",
});

resource property determines which? API resource endpoint to fetch records from dataProvider. It returns properly configured options values for checkboxes.

Refer to Ant Design Checkbox.Group component documentation for detailed info for options. &#8594

defaultValue

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

The easiest way to selecting a default values for checkbox fields is by passing in defaultValue.

optionLabel and optionValue

const { checkboxGroupProps } = useCheckboxGroup({
    resource: "tags",
    optionLabel: "title",
    optionValue: "id",
});

optionLabel and optionValue allows you to change the values and appearances of your options. Default values are optionLabel = "title" and optionValue = "id".

tip

Supports use with optionLabel and optionValue Object path syntax.

const { options } = useSelect({
    resource: "categories",
    optionLabel: "nested.title",
    optionValue: "nested.id",
});

filters

const { checkboxGroupProps } = useCheckboxGroup({
    resource: "tags",
    filters: [
        {
            field: "title",
            operator: "eq",
            value: "Driver Deposit",
        },
    ],
});

It allows us to add some filters while fetching the data. For example, if you want to list only the titles that are equal to "Driver Deposit" records.

sorters

const { checkboxGroupProps } = useCheckboxGroup({
    resource: "tags",
    sorters: [
        {
            field: "title",
            order: "asc",
        },
    ],
});

It allows us to sort the options. For example, if you want to sort your list according to title by ascending.

fetchSize

const { selectProps } = useCheckboxGroup({
    resource: "languages",
    fetchSize: 20,
});

Amount of records to fetch in checkboxes.

queryOptions

const { checkboxGroupProps } = useCheckboxGroup({
    resource: "tags",
    queryOptions: {
        onError: () => {
            console.log("triggers when on query return Error");
        },
    },
});

useQuery options can be set by passing queryOptions property.

pagination

Allows us to set page and items per page values.

For example imagine that we have 1000 post records:

const { selectProps } = useSelect({
    resource: "categories",
    pagination: { current: 3, pageSize: 8 },
});

Listing will start from page 3 showing 8 records.

sort

Deprecated

Use sorters instead.

API Reference

Properties

Type Parameters

Property	Desription	Type	Default
TQueryFnData	Result data returned by the query function. Extends BaseRecord	BaseRecord	BaseRecord
TError	Custom error object that extends HttpError	HttpError	HttpError
TData	Result data returned by the select function. Extends BaseRecord. If not specified, the value of TQueryFnData will be used as the default value.	BaseRecord	TQueryFnData

Example

VIEW SOURCE CODE →

RUN IN YOUR LOCAL

npm create refine-app@latest -- --example field-antd-use-checkbox-group