documentation/versioned_docs/version-3.xx.xx/api-reference/antd/hooks/field/useRadioGroup.md
useRadioGroup hook allows you to manage an Ant Design Radio.Group component when records in a resource needs to be used as radio options.
We will demonstrate how to get data at /languages endpoint from the https://api.fake-rest.refine.dev REST API.
{
[
{
id: 1,
title: "Turkish",
},
{
id: 2,
title: "English",
},
{
id: 3,
title: "German",
},
];
}
import { Form, Radio, useRadioGroup } from "@pankod/refine-antd";
export const PostCreate = () => {
// highlight-start
const { radioGroupProps } = useRadioGroup<ILanguage>({
resource: "languages",
});
// highlight-end
return (
<Form>
<Form.Item label="Languages" name="languages">
// highlight-next-line
<Radio.Group {...radioGroupProps} />
</Form.Item>
</Form>
);
};
interface ILanguage {
id: number;
title: string;
}
All we have to do is pass the radioGroupProps it returns to the <Radio.Group> component.
useRadioGroup uses the useList hook for fetching data. Refer to Ant Design useList hook for details. →
resourceconst { radioGroupProps } = useRadioGroup({
resource: "languages",
});
resource property determines API resource endpoint to fetch records from dataProvider. It returns properly configured options values for radio buttons.
Refer to the Ant Design's Radio.Group component documentation for detailed info on options. →
defaultValueconst { selectProps } = useRadioGroup({
resource: "languages",
// highlight-next-line
defaultValue: 1,
});
The easiest way to selecting a default value for an radio button field is by passing in defaultValue.
optionLabel and optionValueconst { radioGroupProps } = useRadioGroup({
resource: "languages",
// highlight-start
optionLabel: "title",
optionValue: "id",
// highlight-end
});
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",
// highlight-start
optionLabel: "nested.title",
optionValue: "nested.id",
// highlight-end
});
:::
filtersconst { radioGroupProps } = useRadioGroup({
resource: "languages",
// highlight-start
filters: [
{
field: "title",
operator: "eq",
value: "German",
},
],
// highlight-end
});
filters allows us to add filters while fetching the data. For example, if you want to list only the titles that are equal to "German" records.
sortconst { radioGroupProps } = useRadioGroup({
resource: "languages",
// highlight-start
sort: [
{
field: "title",
order: "asc",
},
],
// highlight-end
});
sort allows us to sort the options. For example, if you want to sort your list according to title by ascending.
fetchSizeconst { selectProps } = useRadioGroup({
resource: "languages",
// highlight-next-line
fetchSize: 20,
});
Amount of records to fetch in radio group buttons.
queryOptionsconst { radioGroupProps } = useRadioGroup({
resource: "languages",
// highlight-start
queryOptions: {
onError: () => {
console.log("triggers when on query return Error");
},
},
// highlight-end
});
useQuery options can be set by passing queryOptions property.
paginationAllows us to set page and items per page values.
For example imagine that we have 1000 post records:
const { selectProps } = useSelect({
resource: "categories",
// highlight-next-line
pagination: { current: 3, pageSize: 8 },
});
Listing will start from page 3 showing 8 records.
| Property | Description | Type |
|---|---|---|
| radioGroupProps | Ant design radio group props | Radio Group |
| queryResult | Results of the query of a record | QueryObserverResult<{ data: TData }> |