RHFNativeSelect

RHFNativeSelect wraps the Material UI Native Select, a real <select> element that is ideal for mobile and lightweight dropdowns, and binds it to React Hook Form. Like RHFSelect, it accepts both arrays and arrays of objects as options.

Usage

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

import { useForm } from 'react-hook-form';

type FormValues = {
  country: string;
};

const { control, handleSubmit } = useForm<FormValues>({
  defaultValues: { country: '' }
});

<form onSubmit={handleSubmit(values => console.log(values))}>
  <RHFNativeSelect
    fieldName="country"
    control={control}
    options={['India', 'United States', 'Germany']}
    registerOptions={{ required: 'Please select a country' }}
  />
</form>

Only a single selection is supported, and undefined or null mean no selection. onValueChange receives { newValue, event }: the normalized value and the native change event. The control always fills the width of its container.

With an array of objects

When options is an array of objects, both labelKey and valueKey are required.

• labelKey: the property used as each option's visible label.
• valueKey: the property used as each option's value.

The stored value has the type of the valueKey property: a string property gives a string, and a number property gives a number.

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

Default option & placeholder

A native select always renders a first <option> with the value ''. Its text is defaultOptionText, falling back to placeholder, and it is empty when neither is set. The option is disabled when the field is required, so it can't be picked again once a real option is chosen. Picking it, when it is enabled, stores ''.

<RHFNativeSelect
  fieldName="currency"
  control={control}
  options={['USD', 'EUR', 'GBP']}
  defaultOptionText="Select currency"
  registerOptions={{ required: 'Currency is required' }}
/>

placeholder works as a shorthand for the same text. A native <select> has no placeholder of its own, so it only sets the default option's text.

Customizing individual options

renderOptionLabel customizes the text of each option. It also receives a { disabled, selected } state. An <option> can only display text, so return a string or number, not elements. getOptionDisabled receives an option and returns true to disable it.

<RHFNativeSelect
  fieldName="product"
  control={control}
  options={[
    { id: 1, name: 'Keyboard', stock: 12 },
    { id: 2, name: 'Monitor', stock: 0 },
    { id: 3, name: 'Mouse', stock: 4 }
  ]}
  labelKey="name"
  valueKey="id"
  getOptionDisabled={option => option.stock === 0}
  renderOptionLabel={(option, { disabled }) =>
    disabled
      ? `${option.name} (out of stock)`
      : `${option.name} (${option.stock} left)`
  }
/>

Label placement

A native select has no inline label, so showLabelAboveFormField defaults to true and the label is rendered above the control. Pass false to hide the visible label while keeping the accessible name. The prop takes precedence over allLabelsAboveFields from ConfigProvider, so false hides this label even when the config places every label above its field.

Handling value changes

onValueChange runs after the new value has been stored in the form. It receives { newValue, event }: the normalized value and the native change event. Use it for side effects, such as clearing a dependent field:

<RHFNativeSelect
  fieldName="country"
  control={control}
  options={['India', 'Germany', 'Canada']}
  onValueChange={({ newValue, event }) => setValue('city', '')}
/>

Use customOnChange when you need to change what gets stored. It replaces the default handling, so you must call rhfOnChange yourself with the value to store. This example stores null instead of an empty string for the default option: onValueChange is not called when customOnChange is used.

<RHFNativeSelect
  fieldName="currency"
  control={control}
  options={['USD', 'EUR', 'GBP']}
  customOnChange={({ rhfOnChange, newValue, event }) => {
    rhfOnChange(newValue === '' ? null : newValue);
  }}
/>

The label, helper text and error props work as described in RHFTextField.

Examples

• Native Select
• RHFNativeSelect
• Complete Form

API

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

Source Code

View the full implementation of this component on GitHub.