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.

Tip

If the number of options exceeds 20, consider using RHFAutocomplete or RHFMultiAutocomplete for better searchability, improved keyboard navigation, and overall performance.

Usage

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

Here is a basic example with an array of strings:

<RHFNativeSelect
  fieldName="color"
  control={control}
  options={['Red', 'Blue', 'Orange']}
/>

And here is an example with an array of objects:

<RHFNativeSelect
  fieldName="country"
  control={control}
  options={[
    { code: 'AUS', country: 'Australia' },
    { code: 'IN', country: 'India' },
    { code: 'UAE', country: 'United Arab Emirates' },
  ]}
  labelKey="country"
  valueKey="code"
/>

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

API

The RHFNativeSelectProps interface extends NativeSelectProps and accepts the following additional props. Props marked with * are required.

Name	Type	Description
`fieldName`*	`string`	Name of the field registered with React Hook Form. This prop is required for all components.
`control`*	UseFormControl	The control option yielded on calling the useForm hook.
`registerOptions`	`RegisterOptions`	React Hook Form validation rules. Useful when not using a schema validation library such as Yup or Joi.
`options`*	`string[] / number[] / 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`	Property name used as the visible label for each option. Required when `options` is an array of objects.
`valueKey`	`string`	Property name used as the stored value for each option. Required when `options` is an array of objects.
`customOnChange`	`({ rhfOnChange, newValue, event }) => void`	Override the default `onChange` behavior of the native select component. You must pass the updated `newValue` to the rhfOnChange function to update the field value.
`onValueChange`	`({ newValue, event }) => void`	An optional callback function when an option is selected. The latest value can be obtained from `newValue` argument.
`renderOptionLabel`	`(option) => ReactNode`	Custom renderer for option labels. When not provided, the label is derived from the option value or the property specified by `labelKey`. Option state param added in `v4.2.0`
`getOptionDisabled`	`(option) => boolean`	Function used to determine whether an option should be disabled. Return `true` to disable the option and prevent it from being selected.
`defaultOptionText`	`string`	Custom text to replace the default text when `showDefaultOption` is `true` for `RHFSelect` or `RHFNativeSelect`.
`label`	`ReactNode`	The text to render in the FormLabel component. By default, the value of `fieldName` is transformed (e.g., "firstName" to "First Name") using the fieldNameToLabel function.
`showLabelAboveFormField`	`boolean`	Renders the form label above the field.
`formLabelProps`	FormLabelProps	FormLabelProps to customise FormLabel component for a field. Multiple fields can be configured using the ConfigProvider component.
`hideLabel`	`boolean`	Hides the FormLabel component if you don’t want to display the default form label component or prefer to render a fully custom label instead.
`renderError`	`(error: FieldError) => ReactNode`	Custom renderer for the React Hook Form field error. Receives the current field error and returns the content to display, such as `error.message` or a custom React element in the `HelperText` component. Added in `v4.1.0`.
`hideErrorMessage`	`boolean`	A flag to prevent replacement of helper text of a field by the `errorMessage` when the validation is triggered.
`helperText`	`ReactNode`	The content to display within the FormHelperText component below the field. If the field validation fails, this content will be overridden by the corresponding error message.
`formHelperTextProps`	FormHelperTextProps	FormHelperTextProps to customise FormHelperText component for a field. Multiple fields can be configured using the ConfigProvider component.
`customIds`	`{ field, label, helperText, error }`	Overrides the default field, label, helper text, and error IDs used for accessibility.

Source Code

View the full implementation of this component on GitHub.

Select

Autocomplete