How to Use MUI 5 Select with React-Hook-Form

In this tutorial, we'll see how to use select in React Material UI 5 with the help of react-hook-form. Ensure you have React MUI 5 and react-hook-form installed and configured before getting started.

How to Use react-hook-form in React with MUI 5

Building a Form with React Hook Form and Material-UI Select

import { useForm, Controller } from 'react-hook-form';
import { Select, MenuItem, FormControl, InputLabel, Button } from '@mui/material';

const MyForm = () => {
  // Initialize form methods using useForm
  const { control, handleSubmit } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <div>
      <h1>React Hook Form with Material-UI Select</h1>
      {/* Form */}
      <form onSubmit={handleSubmit(onSubmit)}>
        {/* Select Field */}
        <FormControl fullWidth>
          <InputLabel id="demo-simple-select-label">Age</InputLabel>
          <Controller
            name="age"
            control={control}
            defaultValue=""
            render={({ field }) => (
              <Select
                {...field}
                labelId="demo-simple-select-label"
                id="demo-simple-select"
                label="Age"
              >
                <MenuItem value={10}>Ten</MenuItem>
                <MenuItem value={20}>Twenty</MenuItem>
                <MenuItem value={30}>Thirty</MenuItem>
              </Select>
            )}
          />
        </FormControl>

        <Button type="submit" variant="contained" color="primary">
          Submit
        </Button>
      </form>
    </div>
  );
};

export default MyForm;

react-hook-form mui select

React Hook Form and Material-UI Select Using TypeScript

import React from 'react';
import { useForm, Controller, SubmitHandler } from 'react-hook-form';
import { Select, MenuItem, FormControl, InputLabel, Button } from '@mui/material';

interface FormData {
  age: number;
}

const MyForm: React.FC = () => {
  const { control, handleSubmit } = useForm<FormData>();

  const onSubmit: SubmitHandler<FormData> = (data) => {
    console.log(data);
  };

  return (
    <div>
      <h1>React Hook Form with Material-UI Select</h1>
      <form onSubmit={handleSubmit(onSubmit)}>
        {/* Select Field */}
        <FormControl fullWidth>
          <InputLabel id="demo-simple-select-label">Age</InputLabel>
          <Controller
            name="age"
            control={control}
            defaultValue=""
            render={({ field }) => (
              <Select
                {...field}
                labelId="demo-simple-select-label"
                id="demo-simple-select"
                label="Age"
              >
                <MenuItem value={10}>Ten</MenuItem>
                <MenuItem value={20}>Twenty</MenuItem>
                <MenuItem value={30}>Thirty</MenuItem>
              </Select>
            )}
          />
        </FormControl>

        <Button type="submit" variant="contained" color="primary">
          Submit
        </Button>
      </form>
    </div>
  );
};

export default MyForm;

Easy Form Handling with React and Material-UI Male, Female, Other Options

import { useForm, Controller } from 'react-hook-form';
import { TextField, Select, MenuItem, FormControl, InputLabel, Button } from '@mui/material';

export default function App() {
  const { control, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <div>
      <form onSubmit={handleSubmit(onSubmit)}>
        <FormControl fullWidth margin="normal">
          <Controller
            name="name"
            control={control}
            defaultValue=""
            rules={{ required: 'Name is required' }}
            render={({ field }) => (
              <TextField {...field} label="Name" error={!!errors.name} helperText={errors.name?.message} />
            )}
          />
        </FormControl>

        <FormControl fullWidth margin="normal">
          <InputLabel id="gender-label">Gender</InputLabel>
          <Controller
            name="gender"
            control={control}
            defaultValue=""
            render={({ field }) => (
              <Select {...field} labelId="gender-label" label="Gender">
                <MenuItem value="female">Female</MenuItem>
                <MenuItem value="male">Male</MenuItem>
                <MenuItem value="other">Other</MenuItem>
              </Select>
            )}
          />
        </FormControl>

        <Button type="submit" variant="contained" color="primary">
          Submit
        </Button>
      </form>
    </div>
  );
}

react-hook-form mui 5 select male female other options