rhf
RHF Radio Group
Wrapper cho React Hook Form giúp bind `RadioGroup` với `control`, error state và value hiện tại.
1. Import
Import RHF radio group từ design system.
import { RHFRadioGroup } from "@/design-system/components/rhf";2. Props
Props chính của `RHFRadioGroup`.
| Prop | Type | Default |
|---|---|---|
| control | Control<T> | -- |
| name | Path<T> | -- |
| label | ReactNode | -- |
| required | boolean | false |
| callback | (newValue: string) => void | -- |
| wrapperClassName | string | -- |
| labelClassName | string | -- |
| errorClassName | string | -- |
3. Usages
Các mẫu dùng với React Hook Form.
Giá trị hiện tại: comfortable
import { RHFRadioGroup } from "@/design-system/components/rhf";
import { RadioGroupItem } from "@/design-system/components/ui/radio-group";
import { useForm } from "react-hook-form";
function Example() {
const { control } = useForm({
defaultValues: {
density: "comfortable",
},
});
return (
<RHFRadioGroup control={control} name="density" label="Mật độ hiển thị">
<RadioGroupItem id="density-default" value="default" label="Mặc định" />
<RadioGroupItem id="density-comfortable" value="comfortable" label="Thoải mái" />
<RadioGroupItem id="density-compact" value="compact" label="Thu gọn" />
</RHFRadioGroup>
);
}