RHFCheckbox

The RHFCheckbox component renders a checkbox, allowing users to toggle options on or off, such as subscribing to newsletters. It extends the Checkbox component from MUI, accepting most of its props and offering similar customization options.

Usage

import { RHFCheckbox, RHFCheckboxProps } from '@nish1896/rhf-mui-components';

<RHFCheckbox
  fieldName="agreeTnC"
  control={control}
  label="Agree to Terms & Conditions"
  errorMessage={errors?.agreeTnC?.message}
/>

Examples

• RHFCheckbox
• Checkbox
• Complete Form

API

RHFCheckboxProps extends CheckboxProps and accepts the following additional props:

Name	Type	Required	Description
fieldName	string	✅	React Hook Form requires name as a key for the registration process.
control	UseFormControl	✅	The control option yielded on calling the useForm hook.
onValueChange	(e: ChangeEvent) => void		An optional callback function which returns the state of the checkbox from e.target.checked value
label	ReactNode		The text to render in FormLabel component. By default, the value of fieldName such as firstName will be transformed to display "First Name".
formControlLabelProps	FormControlLabelProps		FormControlLabelProps to customise FormControlLabel component for a field. Multiple fields can be configured using the ConfigProvider component.
helperText	ReactNode		Optional helperText to render under RHFSelect or RHFNativeSelect field.
errorMessage	ReactNode		Error message to be shown for a field in FormHelperText component.
hideErrorMessage	boolean		Prevent replacing of form HelperText by error message during validation trigger.
formHelperTextProps	FormHelperTextProps		FormHelperTextProps to customise FormHelperText component for a field. Multiple fields can be configured using the ConfigProvider component.