rhf
RHF Switch
A React Hook Form switch component with built-in error handling and validation support.
1. Import
Import the RHF Switch component from the design system.
import { RHFSwitch } from "@/design-system/components/rhf";2. Props
RHF Switch 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 Switch patterns and configurations.
import { RHFSwitch } from "@/design-system/components/rhf";
import { useForm } from "react-hook-form";
function Example() {
const { control } = useForm({
defaultValues: {
notifications: false,
},
});
return (
<RHFSwitch
control={control}
name="notifications"
/>
);
}