rhf
RHF Checkbox
A React Hook Form checkbox component with built-in error handling and validation support.
1. Import
Import the RHF Checkbox component from the design system.
import { RHFCheckbox } from "@/design-system/components/rhf";2. Props
RHF Checkbox component props.
| Prop | Type | Default |
|---|---|---|
| control | Control<T> | -- |
| name | Path<T> | -- |
| label | string | -- |
| description | string | -- |
| required | boolean | false |
| callback | (newValue: boolean) => void | -- |
| onBeforeChange | RHFBeforeChange<T> | -- |
| wrapperClassName | string | -- |
| labelClassName | string | -- |
| descriptionClassName | string | -- |
| errorClassName | string | -- |
3. Usages
Common RHF Checkbox patterns and configurations.
import { RHFCheckbox } from "@/design-system/components/rhf";
import { useForm } from "react-hook-form";
function Example() {
const { control } = useForm({
defaultValues: {
acceptTerms: false,
},
});
return (
<RHFCheckbox
control={control}
name="acceptTerms"
label="Accept terms and conditions"
/>
);
}