id | title | custom_edit_url |
---|---|---|
useField |
useField() |
useField
is a custom React hook that will automagically help you hook up inputs to Formik. You can and should use it build your own custom input primitives. There are 2 ways to use it.
import React from 'react';
import { useField, Formik } from 'formik';
const MyTextField = ({ label, ...props }) => {
const [field, meta] = useField(props);
return (
<>
<label>
{label}
<input {...field} {...props} />
</label>
{meta.touched && meta.error ? (
<div className="error">{meta.error}</div>
) : null}
</>
);
};
const Example = () => (
<div>
<h1>My Form</h1>
<Formik
initialValues={{ email: '', firstName: 'red', lastName: '' }}
onSubmit={(values, actions) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
actions.setSubmitting(false);
}, 1000);
}}
render={(props: FormikProps<Values>) => (
<form onSubmit={props.handleSubmit}>
<MyTextField name="firstName" type="text" label="First Name" />
<MyTextField name="lastName" type="text" label="Last Name" />
<MyTextField name="email" type="email" label="Email" />
<button type="submit">Submit</button>
</form>
)}
/>
</div>
);
useField<Value = any>(name: string | FieldAttributes<Val>): [FieldInputProps<Value>, FieldMetaProps<Value>]
A custom React Hook that returns a tuple (2 element array) containing FieldProps
and FieldMetaProps
. It accepts either a string of a field name or an object as an argument. The object must at least contain a name
key. This object should identical to the props that you would pass to <Field>
and the returned helpers will mimic the behavior of <Field>
exactly. This is useful, and generally preferred, since it allows you to take advantage of formik's checkbox, radio, and multiple select behavior when the object contains the relevant key/values (e.g. type: 'checkbox'
, multiple: true
, etc.).
import React from 'react';
import { useField } from 'formik';
function MyTextField(props) {
// this will return field props for an <input />
const [field, meta] = useField(props.name);
return (
<>
<input {...field} {...props} />
{meta.error && meta.touched && <div>{meta.error}</div>}
</>
);
}
function MyInput(props) {
// this will return field exactly like <Field>{({ field }) => ... }</Field>
const [field, meta] = useField(props);
return (
<>
<input {...field} {...props} />
{meta.error && meta.touched && <div>{meta.error}</div>}
</>
);
}
An object that contains:
name: string
- The name of the fieldchecked?: boolean
- Whether or not the input is checked, this is only defined ifuseField
is passed an object with aname
,type: "checkbox"
ortype: radio
.onBlur: () => void;
- A blur event handleronChange: (e: React.ChangeEvent<any>) => void
- A change event handlervalue: any
- The field's value (plucked out ofvalues
) or, if it is a checkbox or radio input, then potentially thevalue
passed intouseField
.multiple?: boolean
- Whether or not the multiple values can be selected. This is only ever defined whenuseField
is passed an object withmultiple: true
An object that contains relevant computed metadata about a field. More specifically,
error?: string
- The field's error message (plucked out oferrors
)initialError?: string
- The field's initial error if the field is present ininitialErrors
(plucked out ofinitialErrors
)initialTouched: boolean
- The field's initial value if the field is present ininitialTouched
(plucked out ofinitialTouched
)initialValue?: any
- The field's initial value if the field is given a value ininitialValues
(plucked out ofinitialValues
)touched: boolean
- Whether the field has been visited (plucked out oftouched
)value: any
- The field's value (plucked out ofvalues
)