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

<div class="lead-paragraph"><span class="dropcap">R</span>eact Hook Form has a Controller component that allows you to use your third-party UI library components with its hook and custom register. In this post, we'll look at a handful of examples of how to use the Controller component with various libraries like AntD and Material UI.</div><div class="max-w-4xl mx-auto px-4 sm:px-6 pt-4">             <div class="border-t dark:border-slate-700"></div>           </div>

<div class="table-of-contents bg-lightblue dark:bg-transparent rounded-md">
    <div class="font-bold">Quick Nav</div>
    <div class="toc">
    <ol class="toc-list">
<li><a href="#20211019-examples">React Hook Form Controller Examples</a></li>
<li><a href="#20211019-materialui">Material UI</a></li>
<li class="subheading"><a href="#20211019-mui-switches">Switches</a></li>
<li class="subheading"><a href="#20211019-mui-sliders">Sliders</a></li>
<li class="subheading"><a href="#20211019-mui-textinput">TextInput</a></li>
<li><a href="#20211019-antd">AntD</a></li>
<li class="subheading"><a href="#20211019-antd-datepicker">Datepicker</a></li>
<li class="subheading"><a href="#20211019-antd-checkbox">Checkbox</a></li>
<li class="subheading"><a href="#20211019-antd-select">Select</a></li>
<li><a href="#20211019-conclusion">Conclusion</a></li>
    </ol>
    </div>
    </div>

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.

<h2 id="20211019-examples">React Hook Form Controller Examples</h2>

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.**

<hr class="my-5" />

<h2 id="20211019-materialui">Material UI</h2>

<div class="text-center"><img data-rjs="2" src="https://travismedia.gumlet.io/public/images/2021/10/material-UI-react-hook-forms-controllers.jpeg" /></div>

<h3 id="20211019-mui-switches">Switches</h3>

```javascript


<Controller
  control={control}
  name="muiSwitch"
  defaultValue={false}
  render={({ field }) => (
    <>
      <Switch {...field} />
    </>
  )}
/>;
```

<h3 id="20211019-mui-sliders">Sliders</h3>

```js


<Controller
  control={control}
  name="muiSwitch"
  defaultValue={30}
  render={({ field }) => (
    <>
      <Slider {...field} step={10} marks min={10} max={110} />
    </>
  )}
/>;
```

<h3 id="20211019-mui-textinput">TextInput</h3>

```js


<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>;
}
```

<hr class="my-5" />

<h2 id="20211019-antd">AntD</h2>

<div class="text-center"><img data-rjs="2" src="https://travismedia.gumlet.io/public/images/2021/10/antd-react-hook-forms-controllers.jpeg" /></div>

<h3 id="20211019-antd-datepicker">DatePicker</h3>

```js


<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>;
}
```

<h3 id="20211019-antd-checkbox">Checkbox</h3>

```js


<Controller
  control={control}
  name="antdCheckbox"
  defaultValue={false}
  render={({ field: { onChange, value } }) => (
    <Checkbox onChange={onChange} checked={value}>
      Checkbox
    </Checkbox>
  )}
/>;
```

<h3 id="20211019-antd-select">Select</h3>

```js


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>
    </>
  )}
/>;
```

<h2 id="20211019-conclusion">Conclusion</h2>

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.