register: (Ref, RegisterOptions?) => ({ onChange, onBlur, name, ref })
This method allows you to register an input or select element and apply validation rules to React Hook Form. Validation rules are all based on the HTML standard and also allow for custom validation methods.
By invoking the register function and supplying an input's name, you will receive the following methods:
Name | Type | Description |
---|---|---|
onChange | ChangeHandler |
|
onBlur | ChangeHandler |
|
ref | React.Ref<any> | Input reference for hook form to register. |
name | string | Input's name being registered. |
Rules
It is required and unique (except native radio and checkbox). Input name supports both dot and bracket syntax, which allows you to easily create nested form fields.
It can neither start with a number nor use number as key name.
disabled
input will result in anundefined
form value. If you want to prevent users from updating the input, you can usereadOnly
or disable the entire <fieldset />. Here is an example.To produce an array of fields, input names should be followed by a dot and number. For example:
test.0.data
Changing the name on each render will result in new inputs being being registered. It's recommend to keep static names for each registered input.
Input Name | Submit Result |
---|---|
register("firstName") | {firstName: 'value'} |
register("name.firstName") | {name: { firstName: 'value' }} |
register("name.firstName.0") | {name: { firstName: [ 'value' ] }} |
Name | Description | Code Examples |
---|---|---|
ref React.RefObject | React element ref |
|
required boolean | A Boolean which, if true, indicates that the input must have a value before the form can be submitted. You can assign a string to return an error message in the errors object. |
|
maxLength
| The maximum length of the value to accept for this input. |
|
minLength
| The minimum length of the value to accept for this input. |
|
max
| The maximum value to accept for this input. |
|
min
| The minimum value to accept for this input. |
|
pattern
| The regex pattern for the input. Note: A RegExp object with the /g flag keeps track of the lastIndex where a match occurred. |
|
validate Function | Object | You can pass a callback function as the argument to validate, or you can pass an object of callback functions to validate all of them. (refer to the examples) Note: for |
|
valueAsNumber:boolean | Returns a Number normally. If something goes wrong
|
|
valueAsDate:boolean | Returns a Date normally. If something goes wrong
|
|
setValueAs:<T>(value: any) => T | Return input value by running through the function.
|
|
import * as React from "react"; import { useForm } from "react-hook-form"; export default function App() { const { register, handleSubmit } = useForm(); const onSubmit = (data) => alert(JSON.stringify(data)); return ( <form onSubmit={handleSubmit(onSubmit)}> <input {...register("firstName", { required: true })} placeholder="First name" /> <input {...register("lastName", { minLength: 2 })} placeholder="Last name" /> <select {...register("category")}> <option value="">Select...</option> <option value="A">Category A</option> <option value="B">Category B</option> </select> <input type="submit" /> </form> ); }
import * as React from "react"; import { useForm } from "react-hook-form"; export default function App() { const { register, handleSubmit } = useForm(); const onSubmit = (data) => alert(JSON.stringify(data)); return ( <form onSubmit={handleSubmit(onSubmit)}> <input {...register("firstName")} placeholder="First name" /> <input {...register("lastName")} placeholder="Last name" /> <select {...register("category")}> <option value="">Select...</option> <option value="A">Category A</option> <option value="B">Category B</option> </select> <input type="submit" /> </form> ); }
Tips
Custom Register
You can also register
inputs with useEffect
and treat them as virtual inputs. For controlled components, we provide a custom hook useController and Controller component to take care this process for you.
If you choose to manually register fields, you will need to update the input value with setValue.
register('firstName', { required: true, min: 8 }); const { onChange } = register('lastChange'); // this onChange method can update the input value // This will work for React Native, except you can't reset input value <TextInput onTextChange={onChange} />