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
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. |