Unform

Simple input

Simple input with Unform, all of your input sources must be created by you.

Here we have an example of a very simple input with support for label and error.

components/Input.js
1import React, { useRef, useEffect } from 'react';
2import { useField } from '@unform/core';
3
4export default function Input({ name, label, ...rest }) {
5 const inputRef = useRef(null);
6
7 const { fieldName, defaultValue, registerField, error } = useField(name);
8
9 useEffect(() => {
10 registerField({
11 name: fieldName,
12 ref: inputRef.current,
13 path: 'value',
14 });
15 }, [fieldName, registerField]);
16
17 return (
18 <>
19 <label htmlFor={fieldName}>{label}</label>
20
21 <input
22 id={fieldName}
23 ref={inputRef}
24 defaultValue={defaultValue}
25 {...rest}
26 />
27
28 {error && <span className="error">{error}</span>}
29 </>
30 );
31}
Edit this page on GitHub