RHFCheckboxGroup

The RHFCheckboxGroup component renders multiple checkboxes allowing the user to select one or more items from a set. It supports both arrays and arrays of objects for options, and each checkbox can be customized as needed.

Usage

import { RHFCheckboxGroup, RHFCheckboxGroupProps } from '@nish1896/rhf-mui-components';

Example with an array of strings:

<RHFCheckboxGroup
  fieldName="color"
  control={control}
  label="Agree to Terms & Conditions"
  options={['Red', 'Blue', 'Orange']}
  errorMessage={errors?.color?.message}
/>

Example with an array of objects:

<RHFCheckboxGroup
  fieldName="countries"
  control={control}
  label="Select Countries You've visited"
  options={[
    { code: 'AUS', country: 'Australia' },
    { code: 'IN', country: 'India' },
    { code: 'UAE', country: 'United Arab Emirates' }
  ]}
  labelKey="country"
  valueKey="code"
  errorMessage={errors?.countries?.message}
/>

note

When using an array of objects for options, both labelKey and valueKey are required. If either is missing, an error will be thrown.

Examples

• RHFCheckboxGroup
• CheckboxGroup
• Complete Form

API

RHFCheckboxGroupProps accepts the following 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.
options	string[]` or `number[]` or `object[]	✅	Icon component to hide password text, such as VisibilityOffIcon from @mui/icons-material/VisibilityOff.
labelKey	string	✅	The key of object in your array, whose value would be shown as the label in RHFSelect or RHFCheckboxGroup. Only required when options prop is an array of objects.
valueKey	string	✅	The key of object in your array, whose value would be actual value of the option selected in RHFSelect or RHFCheckboxGroup. Only required when options prop is an array of objects.
onValueChange	(e: ChangeEvent<HTMLInputElement>, newValue: string) => void		An optional callback function returning the value of the selected control.
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".
showLabelAboveFormField	boolean		Render form label above the form field in FormLabel component.
formLabelProps	FormLabelProps		FormLabelProps to customise FormLabel component for a field. Multiple fields can be configured using the ConfigProvider component.
checkboxProps	CheckboxProps		Checkbox Props to customise each checkbox in checkbox group.
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.