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.
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 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>
);
}
Sources
- react-text-field (mui.com/material-ui)
- react-hook-form (react-hook-form)
