React Hook Form Controller v7 Examples (MaterialUI, AntD, and more)

I recently completed a React project that used react-hook-form and loved it. It’s a rock-solid way to get forms up and running quickly.

But it wasn’t long into the project before I realized I had to figure out how to integrate third-party UI Libraries with it (my Library of choice was Bulma).

Thankfully, React Hook Form has it all covered with their Controller component.

The React Hook Form Controller Component is a wrapper component that takes care of the registration process on third-party library components. It performs the backend magic so you can still partake in using the custom register.

There are already posts out there explaining the parts of the controller (as well as some great documentation), so I decided to help out by simply supplying working React examples.

React Hook Form Controller Examples

So this page exists to provide working examples for those looking to use the React Hook Form Controller component.

This is a living blog post. Please let me know what other libraries or components should be added or that you may be confused about and I’ll add it to the post.

Material UI

Switches

import React from 'react'
import { useForm, Controller } from 'react-hook-form'
import Switch from '@mui/material/Switch';
<Controller
    control={control}
    name='muiSwitch'
    defaultValue={false}
    render={({ field }) => (
        <>
        <Switch {...field} />
        </>
    )}
/>

Sliders

import React from 'react'
import { useForm, Controller } from 'react-hook-form'
import Slider from '@mui/material/Slider';
<Controller
    control={control}
    name='muiSwitch'
    defaultValue={30}
    render={({ field }) => (
        <>
        <Slider {...field} step={10} marks min={10} max={110}/>
        </>
    )}
/>

TextInput

import React from 'react'
import { useForm, Controller } from 'react-hook-form'
import TextField from '@mui/material/TextField';
<Controller
    control={control}
    name='muiTextField'
    defaultValue="Hello World"
    render={({ field }) => (
        <TextField
            {...field}
            id="outlined-required"
            label="Required"
        />
    )}
    rules={{ required: true }}
/>
{errors.muiTextField && <span>This date field is required</span>}

AntD

DatePicker

import React from 'react'
import { useForm, Controller } from 'react-hook-form'
import { DatePicker } from 'antd'
<Controller
    control={control}
    name='antdDatepicker'
    render={({ field }) => (
        <DatePicker
            {...field}
            onChange={e => {
                field.onChange(e)
                console.log(e['_d'])
            }}
        />
    )}
    rules={{ required: true }}
/>
{errors.antdDatepicker && <span>This date field is required</span>}

Checkbox

import React from 'react'
import { useForm, Controller } from 'react-hook-form'
import { Checkbox } from 'antd'
<Controller
    control={control}
    name='antdCheckbox'
    defaultValue={false}
    render={({ field: { onChange, value } }) => (
        <Checkbox onChange={onChange} checked={value}>
            Checkbox
        </Checkbox>
    )}
/>

Select

import React from 'react'
import { useForm, Controller } from 'react-hook-form'
import { Select } from 'antd';
const { Option } = Select;
<Controller
    control={control}
    name='antdSelect'
    render={({ field }) => (
        <>
        <Select defaultValue="lucy" {...field}>
            <Option value="jack">Jack</Option>
            <Option value="lucy">Lucy</Option>
            <Option value="disabled" disabled>
                Disabled
            </Option>
            <Option value="Yiminghe">yiminghe</Option>
        </Select>
        </>
    )}
/>

Conclusion

As noted above, this is a living post. Let me know what should be added so we’ll have a resource example for React Hook Form Controller component examples.