RHFSelect

RHFSelect is an extended version of Select, allowing users to select one or more options. One significant advantage is its ability to accept both arrays and arrays of objects, making it easier to render options with differing labels and values without custom logic.

Usage

import { RHFSelect, RHFSelectProps } from '@nish1896/rhf-mui-components';

Here’s a basic example with an array of strings:

<RHFSelect
  fieldName="color"
  register={register}
  options={['Red', 'Blue', 'Orange']}
  errorMessage={errors?.color?.message}
/>

For options as an array of objects:

<RHFSelect
  fieldName="country"
  register={register}
  options={[
    { code: 'AUS', country: 'Australia' },
    { code: 'IN', country: 'India' },
    { code: 'UAE', country: 'United Arab Emirates' },
  ]}
  labelKey="country"
  valueKey="code"
  errorMessage={errors?.country?.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

• RHFSelect
• Select
• Complete Form

API

The RHFSelectProps interface extends SelectProps and accepts the following additional props:

Name	Type	Required	Description
fieldName	string	✅	React Hook Form requires name as a key for the registration process.
register	UseFormRegister	✅	The register option yielded on calling the useForm hook.
registerOptions	RegisterOptions		Register options if using react-hook-form without any validation libraries like yup or Joi.
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.
defaultValue	string OR string[] OR number OR number[]		When rendering RHFSelect or RHFNativeSelect with some initial value, pass the value in this prop, so that this value is selected. The value would be an array if multiple=true
showDefaultOption	boolean		Show default Label of the disabled option when value of RHFSelect or RHFNativeSelect is ''. This text cane be changed using the defaultOptionText prop.
defaultOptionText	string		Custom text to replace the default text when showDefaultOption is true for RHFSelect or RHFNativeSelect.
onValueChange	(e: SelectChangeEvent) => void		An optional callback function when the value of a field changes. The changed value can be obtained from e.target.value
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.
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.