# register > Register an input with React Hook Form to enable validation, value tracking, and form submission. Supports text, checkbox, select, and more. Source: https://react-hook-form.com/docs/useform/register ## `register:` [UseFormRegister](https://react-hook-form.com/ts#UseFormRegister) This method allows you to register an input or select element and apply validation rules in React Hook Form. Validation rules are all based on the HTML standard and also allow for custom validation methods. ### Props --- | Name | Type | Description | | --------- | ------------------------------------ | ----------------- | | `name` | `string` | Input's name. | | `options` | `RegisterOptions` | Input's behavior. | ### Return --- | Name | Type | Description | | ----------- | ------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `ref` | `React.Ref` | React element ref used to connect hook form to the input. | | `name` | `string` | Input's name being registered. | | `onChange` | `ChangeHandler` | `onChange` prop to subscribe to the input change event. | | `onBlur` | `ChangeHandler` | `onBlur` prop to subscribe to the input blur event. | | `min` | `string \| number` | _(since v7.21.0)_ Present only when [`progressive`](https://react-hook-form.com/docs/useform#progressive) is `true`; reflects the `min` rule if one was set (otherwise `undefined`). | | `max` | `string \| number` | _(since v7.21.0)_ Present only when `progressive` is `true`; reflects the `max` rule if one was set (otherwise `undefined`). | | `maxLength` | `number` | _(since v7.21.0)_ Present only when `progressive` is `true`; reflects the `maxLength` rule if one was set (otherwise `undefined`). | | `minLength` | `number` | _(since v7.21.0)_ Present only when `progressive` is `true`; reflects the `minLength` rule if one was set (otherwise `undefined`). | | `pattern` | `string` | _(since v7.21.0)_ Present only when `progressive` is `true`; reflects the `pattern` rule if one was set (otherwise `undefined`). | | `required` | `boolean` | _(since v7.21.0)_ Present only when `progressive` is `true`; reflects the `required` rule if one was set (otherwise `false`). | | `disabled` | `boolean` | _(since v7.21.0)_ _optional_. Present when the `disabled` option is set. | > **note** > > This is how submitted values will look like: > > | Input Name | Submit Result | > | ------------------------------------------------- | --------------------------------------------------------- | > | `register("firstName")` | `{ firstName: value }` | > | `register("name.firstName")` | `{ name: { firstName: value } }` | > | `register("name.firstName.0")` | `{ name: { firstName: [ value ] } }` | > ### Options --- By selecting the register option, the API table below will get updated. > **note** > > These are validation rules, not native HTML attributes. They run based on the form's [`mode`](https://react-hook-form.com/docs/useform#mode) and don't block typing. To also forward `required`, `min`, `max`, `minLength`, `maxLength`, and `pattern` as native attributes on the input, set [`progressive`](https://react-hook-form.com/docs/useform#progressive) to `true` on `useForm`. >
| Name | Description | | ----------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `required` `boolean` | Indicates that the input must have a value before the form can be submitted.

**Note:** This config aligns with web constrained API for required input validation, for object or array input types, use the validate function instead. | | `maxLength` `number` | The maximum length of the value to accept for this input. | | `minLength` `number` | The minimum length of the value to accept for this input. | | `max` `number` | The maximum value to accept for this input. | | `min` `number` | The minimum value to accept for this input. | | `pattern` `RegExp` | The regex pattern for the input.

**Note:** `RegExp` with the `/g` flag keeps track of the last index where a match occurred. | | `validate` Function \|
`Record` | Validate function will be executed on its own without depending on other validation rules included in the required attribute. The function receives the field value (and, _(since v7.42.0)_ optionally the full form values as a second argument) and must return one of:
Pass an object of named functions to run multiple independent validations, each with its own error message.

**Note:** for object or array input data, it's recommended to use the validate function for validation as the other rules mostly apply to strings, arrays of strings, numbers, and booleans. | | `valueAsNumber` `boolean` | Returns `Number` normally. If something goes wrong `NaN` will be returned.
| | `valueAsDate` `boolean` | Returns `Date` normally. If something goes wrong `Invalid Date` will be returned.
| | `setValueAs` \(value: any) => T | Return input value by running through the function.
  • `valueAs` process is happening **before** validation. Also, `setValueAs` is ignored if either `valueAsNumber` or `valueAsDate` are true.
  • Only applies to text input.
  • Does not transform `defaultValue` or `defaultValues`.
| | `disabled` `boolean = false` | _(since v7.13.0)_ Set `disabled` to `true` will lead input value to be `undefined` and input control to be disabled.
  • `disabled` prop will also omit built-in validation rules.
  • For schema validation, you can leverage the `undefined` value returned from input or context object.
| | `onChange` `(e: SyntheticEvent) => void` | _(since v7.16.0)_ `onChange` function event to be invoked in the change event. | | `onBlur` `(e: SyntheticEvent) => void` | _(since v7.16.0)_ `onBlur` function event to be invoked in the blur event. | | `value` `unknown` | _(since v7.8.0)_ Set up `value` for the registered input. This prop should be utilised inside `useEffect` or invoked once, each re-run will update or overwrite the input value which you have supplied. | | `shouldUnregister` `boolean` | Input will be unregistered after unmount and `defaultValues` will be removed as well.

**Note:** this prop should be avoided when using with `useFieldArray` as unregister function gets called after input unmount/remount and reorder. | | `deps` `string \| string[]` | _(since v7.14.0)_ When this field's own validation runs (e.g. via its registered `onChange`/`onBlur`), the fields listed in `deps` will also be re-validated. Calling `trigger()` manually does not honor `deps`. |
| Name | Description | | -------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `required` string \|
{ value: boolean, message: string } | Indicates that the input must have a value before the form can be submitted.

**Note:** This config aligns with web constrained API for required input validation, for object or array input types, use the validate function instead. | | `maxLength` `{ value: number, message: string }` | The maximum length of the value to accept for this input. | | `minLength` `{ value: number, message: string }` | The minimum length of the value to accept for this input. | | `max` `{ value: number, message: string }` | The maximum value to accept for this input. | | `min` `{ value: number, message: string }` | The minimum value to accept for this input. | | `pattern` `{ value: RegExp, message: string }` | The regex pattern for the input.

**Note:** `RegExp` with the `/g` flag keeps track of the last index where a match occurred. | | `validate` Function \|
`Record` | Validate function will be executed on its own without depending on other validation rules included in the required attribute. The function receives the field value (and, _(since v7.42.0)_ optionally the full form values as a second argument) and must return one of:
Pass an object of named functions to run multiple independent validations, each with its own error message.

**Note:** for object or array input data, it's recommended to use the validate function for validation as the other rules mostly apply to strings, arrays of strings, numbers, and booleans. | | `valueAsNumber` `boolean` | Returns `Number` normally. If something goes wrong `NaN` will be returned.
| | `valueAsDate` `boolean` | Returns `Date` normally. If something goes wrong `Invalid Date` will be returned.
| | `setValueAs` \(value: any) => T | Return input value by running through the function.
  • `valueAs` process is happening **before** validation. Also, `setValueAs` is ignored if either `valueAsNumber` or `valueAsDate` are true.
  • Only applies to text input.
  • Does not transform `defaultValue` or `defaultValues`.
| | `disabled` `boolean = false` | _(since v7.13.0)_ Set `disabled` to `true` will lead input value to be `undefined` and input control to be disabled.
  • `disabled` prop will also omit built-in validation rules.
  • For schema validation, you can leverage the `undefined` value returned from input or context object.
| | `onChange` `(e: SyntheticEvent) => void` | _(since v7.16.0)_ `onChange` function event to be invoked in the change event. | | `onBlur` `(e: SyntheticEvent) => void` | _(since v7.16.0)_ `onBlur` function event to be invoked in the blur event. | | `value` `unknown` | _(since v7.8.0)_ Set up `value` for the registered input. This prop should be utilised inside `useEffect` or invoked once, each re-run will update or overwrite the input value which you have supplied. | | `shouldUnregister` `boolean` | Input will be unregistered after unmount and `defaultValues` will be removed as well.

**Note:** this prop should be avoided when using with `useFieldArray` as unregister function gets called after input unmount/remount and reorder. | | `deps` `string \| string[]` | _(since v7.14.0)_ When this field's own validation runs (e.g. via its registered `onChange`/`onBlur`), the fields listed in `deps` will also be re-validated. Calling `trigger()` manually does not honor `deps`. |
> **Important: Rules** > > > ### Examples --- **Register input or select** [Open in CodeSandbox](https://codesandbox.io/s/register-is0sfo) ```javascript import { useForm } from "react-hook-form" export default function App() { const { register, handleSubmit } = useForm({ defaultValues: { firstName: "", lastName: "", category: "", checkbox: [], radio: "", }, }) return (
) } ``` **Custom async validation** ```javascript import { useForm } from "react-hook-form" import { checkProduct } from "./service" export default function App() { const { register, handleSubmit } = useForm() return (
{ if (!category) return "Choose a category" if (!product) return "Specify your product" const isInStock = await checkProduct(category, product) return isInStock || "There is no such product" }, }, })} />
) } ``` **File input** A file input's value is a `FileList`, not a string. `required` works as usual, use `validate` to check things like file size, and build a `FormData` from the files when you submit. ```tsx import { useForm } from "react-hook-form" type FormValues = { avatar: FileList } export default function App() { const { register, handleSubmit, formState: { errors }, } = useForm() const onSubmit = async ({ avatar }: FormValues) => { const body = new FormData() body.append("avatar", avatar[0]) await fetch("/api/avatar", { method: "POST", body }) } return (
!files?.[0] || files[0].size < 2_000_000 || "Max size is 2 MB", })} /> {errors.avatar &&

{errors.avatar.message}

}
) } ``` ### Video --- [Watch on YouTube](https://www.youtube.com/watch?v=JFIpCoajYkA) ### Tips --- #### Destructuring assignment ```javascript const { onChange, onBlur, name, ref } = register('firstName'); // Include a type check against the field path with the name you have supplied. // same as above ``` #### Custom Register You can also register inputs with `useEffect` and treat them as virtual inputs. For controlled components, we provide a custom hook [useController](https://react-hook-form.com/docs/usecontroller) and [Controller](https://react-hook-form.com/docs/usecontroller/controller) component to take care of this process for you. If you choose to manually register fields, you will need to update the input value with [setValue](https://react-hook-form.com/docs/useform/setvalue). ```javascript register("firstName", { required: true, minLength: 8 }) ; setValue("firstName", value)} /> ``` #### How to work with `innerRef`, `inputRef`? When the custom input component doesn't expose the ref correctly, you can get it working via the following method. ```javascript // not working, because ref is not assigned const firstName = register('firstName', { required: true }) ``` If you also need the input's ref yourself, see [How to share ref usage](https://react-hook-form.com/faqs#Howtosharerefusage). ### Troubleshooting --- #### A number input is submitted as a string **Why it happens:** Input values in the DOM are always strings, so `` gives you `"5"`, not `5`. **Fix:** Add `valueAsNumber`, or `setValueAs` for your own conversion: ```javascript ``` #### A field in a custom input component is missing from the submitted data **Why it happens:** `register` reads the value through the `ref` of the actual ``. If your component takes the props but does not pass `ref` on to the ``, the field has no value and cannot be focused on errors. **Fix:** Pass all props, including `ref`, to the ``. If the component uses a different prop name such as `inputRef`, see [How to work with `innerRef`, `inputRef`](#HowtoworkwithinnerRefinputRef). #### A field registered with `disabled: true` is missing from the submitted data **Why it happens:** Disabling a field through `register` excludes its value from the data passed to `handleSubmit`. **Fix:** If the user should see the value but not change it, and you still need it in the submitted data, use `readOnly` instead: ``.