RHFSelect

RHFSelect wraps the Material UI Select with label, error and helper-text handling, bound to React Hook Form through control. It supports single or multiple selection and accepts both arrays and arrays of objects, so options with differing labels and values need no custom logic.

Usage

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

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

type FormValues = {
  role: string;
};

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

<form onSubmit={handleSubmit(values => console.log(values))}>
  <RHFSelect
    fieldName="role"
    control={control}
    options={['Admin', 'Editor', 'Viewer']}
    registerOptions={{ required: 'Please select a role' }}
  />
</form>

With primitive options, the stored value has the same type as the options, so a string option gives a string and a number option gives a number. onValueChange receives { newValue, event, child }: the normalized value, the Material UI change event, and the selected option element.

undefined, null and '' all mean no selection.

Selecting multiple values

Set multiple to store an array. The values are kept in the order they were selected, and keep the type of the options. Use [] as the default value.

type FormValues = {
  roles: string[];
};

const { control } = useForm<FormValues>({
  defaultValues: { roles: [] }
});

<RHFSelect
  fieldName="roles"
  control={control}
  options={['Admin', 'Editor', 'Viewer']}
  multiple
  registerOptions={{
    validate: value => value.length > 0 || 'Select at least one role'
  }}
/>

The closed field shows the labels of the selected options joined with , . Use renderValue to display it differently, as described in Custom selected value.

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. With multiple, it is an array of those values.

<RHFSelect
  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

Two props help when nothing is selected yet. showDefaultOption adds a first menu item with the value '', labelled with defaultOptionText, which defaults to "Select" followed by the label generated from fieldName, such as Select Role. Choosing it clears the selection. It is disabled when the field is required, so it can't be picked once a real option is chosen.

placeholder is text shown inside the closed field while nothing is selected. Unlike the default option it isn't a menu item, it is shown faded, and the inline label is not rendered while it is shown.

<RHFSelect
  fieldName="role"
  control={control}
  options={['Admin', 'Editor', 'Viewer']}
  showDefaultOption
  defaultOptionText="No role"
/>

<RHFSelect
  fieldName="plan"
  control={control}
  options={['Free', 'Pro', 'Team']}
  placeholder="Choose a plan"
/>

Customizing individual options

renderOptionLabel replaces the content of each menu item. It receives the option and a state object with disabled and selected, so the label can react to either. getOptionDisabled receives an option and returns true to disable it.

<RHFSelect
  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"
  renderOptionLabel={(option, { disabled, selected }) => (
    <span
      style={{
        opacity: disabled ? 0.5 : 1,
        fontWeight: selected ? 700 : 400
      }}
    >
      {option.name} ({option.stock} in stock)
    </span>
  )}
  getOptionDisabled={option => option.stock === 0}
/>

Custom selected value

renderValue changes what the closed field displays, while renderOptionLabel only changes the menu items. It receives the normalized value, which is an array when multiple is set.

<RHFSelect
  fieldName="tags"
  control={control}
  options={['Bug', 'Feature', 'Docs', 'Chore']}
  multiple
  renderValue={selected =>
    selected.length ? `${selected.length} selected` : ''
  }
/>

Styling the options

menuItemProps is forwarded to every MenuItem, including the default option, which is handy for a shared dense, divider or sx. inputLabelProps is forwarded to the InputLabel shown inside the field's outline. It has no effect when the field uses a label above (showLabelAboveFormField), hideLabel, or a placeholder with no value selected.

<RHFSelect
  fieldName="role"
  control={control}
  options={['Admin', 'Editor', 'Viewer']}
  menuItemProps={{ dense: true, sx: { fontSize: 14 } }}
  inputLabelProps={{ sx: { fontWeight: 600 } }}
/>

Handling value changes

onValueChange runs after the new value has been stored in the form. It receives { newValue, event, child }: the normalized value, the Material UI change event, and the selected option element. Use it for side effects, such as loading dependent data:

<RHFSelect
  fieldName="country"
  control={control}
  options={['India', 'Germany', 'Canada']}
  onValueChange={({ newValue, event, child }) => fetchCities(newValue)}
/>

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 limits a multiple select to three values: onValueChange is not called when customOnChange is used.

<RHFSelect
  fieldName="roles"
  control={control}
  options={['Admin', 'Editor', 'Viewer', 'Guest']}
  multiple
  customOnChange={({ rhfOnChange, newValue, event, child }) => {
    if (newValue.length <= 3) {
      rhfOnChange(newValue);
    }
  }}
/>

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

Wrapping the component

You can extend or reuse the RHFSelect component by creating your own wrapper component.

/**
 * The below code snippet illustrates how to create a reusable styled Select
 * component using RHFSelect, which can be used throughout the application.
 *
 * `multiple` is left in the prop surface (not `Omit`'d) so its generic
 * `Multiple` type param is inferred per call site from the literal passed —
 * same as `RHFSelect` itself. Omitting `multiple` from the props type would
 * pin `Multiple` to its default and make passing `multiple={false}` a type
 * error.
 *
 * A similar approach can be taken to create reusable styled components for:
 * - RHFNativeSelect
 * - RHFCheckboxGroup
 * - RHFRadioGroup
 */

import { type FieldValues } from 'react-hook-form';
import { Poppins } from 'next/font/google';
import RHFSelect, {
  type RHFSelectProps
} from '@nish1896/rhf-mui-components/mui/select';
import type { StrNumObjOption } from '@nish1896/rhf-mui-components/types';

const poppins = Poppins({
  subsets: ['latin'],
  style: 'italic',
  weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900']
});

type StyledSelectProps<
  T extends FieldValues,
  Option extends StrNumObjOption = StrNumObjOption,
  LabelKey extends Extract<keyof Option, string> = Extract<keyof Option, string>,
  ValueKey extends Extract<keyof Option, string> = Extract<keyof Option, string>,
  Multiple extends boolean = true
> = Omit<
  RHFSelectProps<T, Option, LabelKey, ValueKey, Multiple>,
  'showLabelAboveFormField'
>;

const StyledSelect = <
  T extends FieldValues,
  Option extends StrNumObjOption = StrNumObjOption,
  LabelKey extends Extract<keyof Option, string> = Extract<keyof Option, string>,
  ValueKey extends Extract<keyof Option, string> = Extract<keyof Option, string>,
  Multiple extends boolean = true
>({
  formLabelProps,
  ...rest
}: StyledSelectProps<T, Option, LabelKey, ValueKey, Multiple>) => {

  return (
    <RHFSelect
      formLabelProps={{
        ...formLabelProps,
        sx: {
          fontFamily: poppins.style.fontFamily,
          fontWeight: 400,
          ...formLabelProps?.sx
        }
      }}
      showLabelAboveFormField
      {...rest}
    />
  );
};

export default StyledSelect;

Examples

• Select
• RHFSelect
• Styled Select
• Complete Form

API

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

Source Code

View the full implementation of this component on GitHub.