useField() - rkaku/formik-material-ui GitHub Wiki

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): [FieldInputProps, FieldMetaProps] 

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

FieldInputProps An object that contains:

  • name: string - The name of the field
  • checked?: boolean - Whether or not the input is checked, this is only defined if useField is passed an object with a name
  • type: "checkbox" or type: radio.
  • onBlur: () => void; - A blur event handler
  • onChange: (e: React.ChangeEvent) => void - A change event handler
  • value: any - The field's value (plucked out of values) or, if it is a checkbox or radio input, then potentially the value passed into useField.
  • multiple?: boolean - Whether or not the multiple values can be selected. This is only ever defined when useField is passed an object with multiple: true

FieldMetaProps An object that contains relevant computed metadata about a field. More specifically,

  • error?: string - The field's error message (plucked out of errors)
  • initialError?: string - The field's initial error if the field is present in initialErrors (plucked out of initialErrors)
  • initialTouched: boolean - The field's initial value if the field is present in initialTouched (plucked out of initialTouched)
  • initialValue?: any - The field's initial value if the field is given a value in initialValues (plucked out of initialValues)
  • touched: boolean - Whether the field has been visited (plucked out of touched)
  • value: any - The field's value (plucked out of values)
⚠️ **GitHub.com Fallback** ⚠️