RHFRadioGroup
The RHFRadioGroup
component renders a group of radio buttons,
allowing users to select one option from a set. It extends the RadioGroup
component from Material-UI, accepting most of its props and offering
similar customization options. It supports both arrays and
arrays of objects for options.
Usage
import { RHFRadioGroup, RHFRadioGroupProps } from '@nish1896/rhf-mui-components';
Example with an array of strings:
<RHFRadioGroup
fieldName="favouriteColor"
control={control}
options={['Red', 'Blue', 'Orange']}
errorMessage={errors?.favouriteColor?.message}
/>
Example with an array of objects:
<RHFRadioGroup
fieldName="nationality"
control={control}
options={[
{ code: 'AUS', country: 'Australia' },
{ code: 'IN', country: 'India' },
{ code: 'UAE', country: 'United Arab Emirates' }
]}
labelKey="country"
valueKey="code"
errorMessage={errors?.nationality?.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
RHFRadioGroupProps
extends RadioGroupProps
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. |
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. | |
radioProps | RadioProps | Radio Props to customise each radio button in radiobutton 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. |