RHFNativeSelect

RHFNativeSelect extends NativeSelect and is ideal for mobile-friendly form designs. Similar to RHFSelect, it supports both arrays and arrays of objects for flexible option rendering.

Usage

import RHFNativeSelect, { RHFNativeSelectProps } from '@nish1896/rhf-mui-components/mui/native-select';

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

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

And with an array of objects:

<RHFNativeSelect
  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}
/>

warning

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

Examples

• RHFNativeSelect
• Native Select
• Complete Form

API

The RHFNativeSelectProps interface extends NativeSelectProps and accepts the following additional props:

Name	Type	Required	Description
fieldName	string	✅	React Hook Form requires name as a key for the registration process. This is a required prop for all components.
register	UseFormRegister	✅	The register option yielded on calling the useForm hook.
registerOptions	RegisterOptions		Register options for validation if using react-hook-form without any validation libraries like yup or Joi.
options	string[] or number[] or object[]	✅	An array with string, numeric or object values. Make sure to pass labelKey and valueKey when options is an array of objects.
labelKey	string	✅	The key of object in options array, whose value would be shown as the label in the formfield. Only required when input options is an array of objects.
valueKey	string	✅	The key of object in options array, whose value would be actual value of the option selected in the formfield. Only required when input options 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 can be changed using the defaultOptionText prop.
onValueChange	(e: ChangeEvent) => void		An optional callback function when the value of a field changes. The changed value can be obtained from e.target.value.
defaultOptionText	string		Custom text to replace the default text when showDefaultOption is true for RHFSelect or RHFNativeSelect.
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".
errorMessage	ReactNode		Error message to be shown for a field in FormHelperText component.
hideErrorMessage	boolean		A flag to prevent replacement of helper text of a field by the error message when the validation is triggered.
formHelperTextProps	FormHelperTextProps		FormHelperTextProps to customise FormHelperText component for a field. Multiple fields can be configured using the ConfigProvider component.