formik#Field JavaScript Examples

LabelField = (props) => {
    return (
        <>
            <div className="field-above">
                <label htmlFor={props.name} className="field-label">
                    {props.placeholder}
                </label>
                {props.touched && props.error && (
                    <p className="form-error">{props.error}</p>
                )}
            </div>

            <Field
                className="formik-fields"
                type={props.type}
                name={props.name}
                placeholder={props.placeholder}
                data-testid={props.test}
            />
        </>
    );
}

FormInput = styled(Field)`
  width: 100%;
  font-size: 1.2rem;
  height: 16rem;
  padding: 20px 15px;
  background: #f9f9f9;
  border-radius: 4px 4px 0 0;
  border: none;
  border-bottom: 1px solid #a1a1a1;
  margin: 20px 0 20px 0;
`

BaseInput = styled(Field)`
  width: calc(100% - 34px);
  padding: 10px 15px;
  color:white;
  background-color: transparent;
  border: 2px solid ${props => {
    try {
      if (props.theme.colors.inputColor) {
        return props.theme.colors.inputColor
      } else {
        throw new Error("inputcolor-not-defined")
      }
    } catch (error) {
      return "#f3f3f3"
    }
  }};
  border-radius: 5px;
  font-family: inherit;

  &::placeholder {
    color: #f3f3f3;
    opacity: 0.5;
  }
`

function Checkbox({ name, children }) {
  return (
    <Field name={name}>
      {({ field, meta }) => (
        <>
          <div className="form-control">
            <div className=" checkbox-control">
              <input {...field} id={name} type="checkbox" />
              <label htmlFor={name}>{children}</label>
            </div>
            {meta.touched && meta.error && (
              <div className="error">{meta.error}</div>
            )}
          </div>
        </>
      )}
    </Field>
  );
}

CustomCheckbox = ({ name, label }) => {
  return (
    <Field name={name}>
      {({ field }) => {
        return (
          <>
            <label className="verical-center margin-top-20 margin-bottom-20">
              <input
                {...field}
                id={field.name}
                value={field.value}
                checked={field.value}
                name={field.name}
                type="checkbox"
                aria-checked={field.value}
                aria-label={name}
              />
              <span>{label}</span>
            </label>
          </>
        );
      }}
    </Field>
  );
}

render() {
    const { fieldPath } = this.props;

    return (
      <Field
        name={fieldPath}
        component={(formikProps) => (
          <ProtectionButtonsComponent formik={formikProps} {...this.props} />
        )}
      />
    );
  }

render() {
    const { optimized, fieldPath } = this.props;
    const FormikField = optimized ? FastField : Field;
    return (
      <FormikField
        className="invenio-boolean-field"
        name={fieldPath}
        component={this.renderFormField}
      />
    );
  }

describe('RegisterForm tests', () => {
  it('should render all fields of Register Form', () => {
    const wrapper = shallow(<RegisterForm {...props} />);
    expect(wrapper.find(Field).length).toEqual(4);
  });
  it('should not render Loader if not loading', () => {
    const wrapper = shallow(<RegisterForm {...props} />);
    expect(wrapper.find(Loader)).toHaveLength(0);
  });
  it('should render Loader if loading', () => {
    const wrapper = shallow(<RegisterForm {...props} loading />);
    expect(wrapper.find(Loader)).toHaveLength(1);
  });
  it('should set checkbox checked', () => {
    const wrapper = shallow(<RegisterForm {...props} />);
    const checkbox = wrapper.find(FormControlLabel);
    checkbox.props().onChange({ target: { checked: true } });
    expect(wrapper.find(FormControlLabel).props().checked).toBeTruthy();
  });
});

ConfirmForm = ({
  theme,
  handleSubmit,
  loading,
}) => {
  const styling = styles(theme)
  const { t } = useTranslation()

  return (
    <View style={styling.root}>
      <View style={styling.input}>
        <Field name="confirmationCode" component={TextField} placeholder={t('Confirmation code')} />
      </View>
      <View style={styling.input}>
        <DefaultButton label={t('Done')} onPress={handleSubmit} loading={loading} />
      </View>
    </View>
  )
}

ForgotForm = () => {
  const ref = useRef(null);
  const handleSubmit = async (values) => {
    await forgot(ref, values);
  };

  return (
    <Formik
      validationSchema={validationSchema}
      initialValues={initialValues}
      onSubmit={handleSubmit}
    >
      <Form className="space-y-4">
        <Fieldset name="email" label="Your email">
          <Field id="email" name="email" as={Email} autoFocus />
        </Fieldset>
        <Submit className="button full primary">Send password reset email</Submit>
        <Recaptcha ref={ref} />
      </Form>
    </Formik>
  );
}

export default function LogIn({ showResetPassword }) {
  return (
    <DivLogIn className="border-left border-bottom border-right">
      <Formik
        initialValues={{
          email: '',
          password: '',
          isChecked: false
        }}
        validate={values => {
          const errors = {}
          if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
            errors.email = 'Invalid email address'
          }
          return errors
        }}
        onSubmit={(data, { setSubmitting }) => {
          setSubmitting(true)
          alert(`Your email is: ${data.email}, \nyour password is: ${data.password}, \nyou ${data.isChecked ? 'checked' : 'didn\'t check'} checkbox.`)
          setSubmitting(false)
        }}
      >
        {({ errors, isSubmitting }) => (
          <Form name="LogIn">
            <label>
              Email:
              <Field type="email" name="email" required />
              {errors.email ? <div>{errors.email}</div> : null} 
            </label>
            <label>
              Password:
              <Field type="password" name="password" minlength="6" required />
            </label>
            <div className="form-check">
              <label className="form-check-label" htmlFor="autoSizingCheck">
                <Field 
                  type="checkbox" 
                  name="isChecked" 
                  className="form-check-input" 
                  id="autoSizingCheck"
                />
                Remember Me
              </label>
            </div>
            <button type="submit" disabled={isSubmitting}>
              Submit
            </button>
          </Form>
        )}        
      </Formik>
      <div className="dropdown-divider"></div>
      <a className="dropdown-item badge badge-light" href="/#" onClick={showResetPassword}>
        Reset Password
      </a>
    </DivLogIn>
  )
}

Input = styled(Field)`
  height: 5.6rem;
  font-size: 1.6rem;
  background: #f9f9f9;
  border: none;
  border-bottom: 1px solid #a1a1a1;
  padding: 10px;
`

AddAllergens = (props) => {
  const classes = buttonStyles();

  return (
    <FieldArray name="allergens">
      {({ push, remove }) => (
        <div
          className="restriction"
          style={{
            marginTop: "10px",
            display: "none",
            flexDirection: "column",
          }}
        >
          <Typography>Allergens</Typography>
          {props.values.allergens.map((allergen, index) => {
            return (
              <div
                key={index}
                style={{ display: "flex", alignItems: "center" }}
              >
                <Field
                  component={TextField}
                  margin="normal"
                  variant="outlined"
                  label="Allergen"
                  name={`allergens[${index}]`}
                  value={allergen}
                />
                <Button
                  className={classes.button}
                  margin="none"
                  type="button"
                  color="secondary"
                  variant="outlined"
                  onClick={() => remove(index)}
                >
                  x
                </Button>
              </div>
            );
          })}
          <Button
            className={classes.button}
            type="button"
            variant="outlined"
            onClick={() => push("")}
          >
            Add Allergen
          </Button>
        </div>
      )}
    </FieldArray>
  );
}

CheckboxInput = ({ value, children, ...props }) => (
  <CheckboxLabel>
    <Field type="checkbox" value={value || children} {...props} />
    <span className="checkmark" />
    {children}
  </CheckboxLabel>
)

Feedback = props => (
  <main className="flex flex-col w-2/3 m-auto py-2">
    <h1 className="text-2xl text-gray-900 font-semibold m-auto">
      We'd love to hear your thoughts!
    </h1>

    <Formik
      initialValues={{ name: '', email: '', rating: '', comments: '' }}
      validate={formValidator}
      onSubmit={values => props.onSubmit(values)}
    >
      {({ isSubmitting }) => (
        <Form className="form bg-white p-6 my-10 relative">
          <p className="text-red-600 mb-1">
            All fields marked with * are required
          </p>

          <label>
            Name *
            <Field
              type="text"
              name="name"
              placeholder="Name here"
              className="border p-2 w-full mt-3"
            />
          </label>
          <ErrorMessage name="name" component="div" className="text-red-600" />
          <label>
            Email *
            <Field
              type="email"
              name="email"
              placeholder="Email here"
              className="border p-2 w-full mt-3"
            />
          </label>

          <ErrorMessage name="email" component="div" className="text-red-600" />
          <label>
            Rating *
            <Field as="select" name="rating" className="border p-2 w-full mt-3">
              <option value=""></option>
              <option value="Awesome">Awesome</option>
              <option value="Good">Good</option>
              <option value="Bad">Bad</option>
            </Field>
          </label>
          <ErrorMessage
            name="rating"
            component="div"
            className="text-red-600"
          />

          <label>
            Comments *
            <Field
              as="textarea"
              name="comments"
              placeholder="comments here"
              className="border p-2 w-full mt-3"
            />
          </label>
          <ErrorMessage
            name="comments"
            component="div"
            className="text-red-600"
          />
          <button
            type="submit"
            disabled={isSubmitting}
            className="w-full mt-6 bg-blue-600 hover:bg-blue-500 text-white font-semibold p-3"
          >
            Submit
          </button>
        </Form>
      )}
    </Formik>
  </main>
)

SignupForm = () => {
  return (
    <Formik
      initialValues={{ firstName: '', lastName: '', email: '', password: '' }}
      validationSchema={Yup.object({
        firstName: Yup.string()
          .max(15, 'Must be 15 characters or less')
          .required('Required'),
        lastName: Yup.string()
          .max(20, 'Must be 20 characters or less')
          .required('Required'),
        email: Yup.string().email('Invalid email address').required('Required'),
        password: Yup.string().required('Required'),
      })}
      onSubmit={(values, { setSubmitting }) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          setSubmitting(false);
        }, 400);
      }}
    >
      <SignupStyled>
        <div id="wrapper">
          <div id="signUpInfo">
            <img
              src="./img/codeclannglogo.png"
              alt="Code Clan Logo"
              id="logo"
            />
            <h1 class="infoHeading">
              welcome to CodeClan
              <br />
              Nigeria
            </h1>
            <p class="infoSubheading">sign up to</p>
            <img src="./img/keyToComputer.png " alt="" id="infoIllustration" />
          </div>
          <div id="signUpDiv">
            <h1 class="none show">register</h1>
            <h2 class="none display">Create a Code Clan account</h2>
            <Form id="signUpForm">
              <AlertComponent variant="danger" />
              <p className="info blue signUp">sign up with email</p>
              <div className="nameInputGroup">
                <label htmlFor="firstName">First Name</label>
                <br />

                <Field name="firstName" id="firstName" type="text" />
                <ErrorMessage name="firstName" />
                <label htmlFor="lastName">Last Name</label>
                <Field name="lastName" type="text" />
                <ErrorMessage name="lastName" />
              </div>
              <label htmlFor="email">Email Address</label>
              <Field name="email" type="email" />
              <ErrorMessage name="email" />
              <p className="info blue privacy">
                by clicking on this button, you agree to our Terms of use and
                privacy policy
              </p>
              <button disabled className="submit">
                Sign up
              </button>
              <p className="info blue signIn">
                already have an account?
                <span>
                  <Link to="/login/">Sign In</Link>
                </span>
              </p>
            </Form>
          </div>
        </div>
      </SignupStyled>
    </Formik>
  );
}

function ForgotPassword() {
    const initialValues = {
        email: ''
    };

    const validationSchema = Yup.object().shape({
        email: Yup.string()
            .email('Email is invalid')
            .required('Email is required')
    });

    function onSubmit({ email }, { setSubmitting }) {
        alertService.clear();
        accountService.forgotPassword(email)
            .then(() => alertService.success('Please check your email for password reset instructions'))
            .catch(error => alertService.error(error))
            .finally(() => setSubmitting(false));
    }

    return (
        <Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={onSubmit}>
            {({ errors, touched, isSubmitting }) => (
                <Form>
                    <h3 className="card-header">Forgot Password</h3>
                    <div className="card-body">
                        <div className="form-group">
                            <label>Email</label>
                            <Field name="email" type="text" className={'form-control' + (errors.email && touched.email ? ' is-invalid' : '')} />
                            <ErrorMessage name="email" component="div" className="invalid-feedback" />
                        </div>
                        <div className="form-row">
                            <div className="form-group col">
                                <button type="submit" disabled={isSubmitting} className="btn btn-primary">
                                    {isSubmitting && <span className="spinner-border spinner-border-sm mr-1"></span>}
                                    Submit
                                </button>
                                <Link to="login" className="btn btn-link">Cancel</Link>
                            </div>
                        </div>
                    </div>
                </Form>
            )}
        </Formik>        
    )
}

render() {
    return (
      <Formik
        initialValues={this.getInitialValues()}
        validationSchema={ReminderSchema}
        onSubmit={this.handleSubmit}
      >
        <Form className="w-full flex flex-col gap-3">
          <FormFieldset>
            <FormLabel htmlFor="description">
              What do you want to remember?
            </FormLabel>
            <div className="flex flex-row flex-wrap gap-2">
              <Field
                id="description"
                name="description"
                component={FormTextInput}
                placeholder="e.g.: Buy milk"
                className="flex-grow"
              />
              <Field
                name="color"
                as={ReminderColorPicker}
                className="flex-shrink"
              />
            </div>
            <ErrorMessage component={FormErrorMessage} name="description" />
            <ErrorMessage component={FormErrorMessage} name="color" />
          </FormFieldset>

          <FormFieldset>
            <FormLabel htmlFor="date">When?</FormLabel>

            <div className="flex flex-row flex-wrap gap-2">
              <Field
                id="date"
                name="date"
                component={FormDatePicker}
                className="flex-grow"
              />
              <Field
                id="time"
                name="time"
                component={FormTimePicker}
                className="w-full sm:w-44"
              />
            </div>
            <ErrorMessage component={FormErrorMessage} name="date" />
            <ErrorMessage component={FormErrorMessage} name="time" />
          </FormFieldset>

          <FormFieldset>
            <FormLabel htmlFor="city">Where?</FormLabel>
            <Field
              id="city"
              name="city"
              component={FormTextInput}
              placeholder="e.g.: New York City"
            />
            <ErrorMessage component={FormErrorMessage} name="city" />
          </FormFieldset>

          <ReminderForecastContainer names={{ city: 'city', date: 'date' }} />

          <FormActions>
            <BaseButton
              type="submit"
              className="bg-indigo-700 hover:bg-indigo-500 text-white"
            >
              <CheckIcon svgClassName="w-6 h-6" />
              Confirm
            </BaseButton>
          </FormActions>
        </Form>
      </Formik>
    );
  }

Element = props => {
  const { description, ...field } = props.field;
  let input;
  const classes = useStyles();

  switch (field.type) {
    case 'select':
      let options = field.options.map(option =>
        React.createElement(
          MenuItem,
          {
            key: `${field.name}-${option.value}`,
            variant: 'filled',
            value: option.value,
            defaultValue: field.options[0],
          },
          option.label,
        ),
      );
      input = React.createElement(
        Field,
        { key: field.name, component: Select, fullWidth: true, variant: 'filled', ...field },
        [...options],
      );
      break;
    case 'checkbox':
      input = React.createElement(Field, {
        key: field.name,
        component: CheckboxWithLabel,
        Label: { label: field.label },
        ...field,
      });
      break;
    // case 'file':
    //   input = React.createElement();
    default:
      input = React.createElement(Field, {
        key: field.name,
        component: TextField,
        fullWidth: true,
        variant: 'filled',
        FormHelperTextProps: {
          classes: { root: classes.helperText },
        },
        InputProps: { classes: {
          root: classes.inputRoot,
          input: classes.input,
        } },
        // Required to get both label and placeholder to show
        InputLabelProps: {
          classes: { root: classes.labelRoot },
          shrink: true,
        },
        ...field,
      });
      break;
  }
  return (
    <>
      {description && <Typography variant="body1">{description}</Typography>}
      {input}
    </>
  );
}

render() {
    const { optimized, fieldPath } = this.props;
    const FormikField = optimized ? FastField : Field;
    return <FormikField name={fieldPath} component={this.renderFormField} />;
  }

/** Top-level Access Right Component */

  render() {
    const {
      fieldPath,
      formik, // this is our access to the shared current draft
      label,
      labelIcon,
      community,
    } = this.props;

    const communityAccess = community?.access.visibility || 'public';
    const isMetadataOnly = !formik.form.values.files.enabled;

    return (
      <Card className="access-right">
        <Form.Field required>
          <Card.Content>
            <Card.Header>
              <FieldLabel htmlFor={fieldPath} icon={labelIcon} label={label} />
            </Card.Header>
          </Card.Content>
          <Card.Content>
            <MetadataAccess
              recordAccess={formik.field.value.record}
              communityAccess={communityAccess}
            />

            <Divider hidden />

            <FilesAccess
              access={formik.field.value}
              accessCommunity={communityAccess}
              metadataOnly={isMetadataOnly}
            />

            <Divider hidden />

            <AccessMessage
              access={formik.field.value}
              accessCommunity={communityAccess}
              metadataOnly={isMetadataOnly}
            />

            <Divider hidden />
          </Card.Content>
          <Card.Content>
            <Card.Header as={Header} size="tiny">
              {i18next.t('Options')}
            </Card.Header>
          </Card.Content>
          <Card.Content extra>
            <EmbargoAccess
              access={formik.field.value}
              accessCommunity={communityAccess}
              metadataOnly={isMetadataOnly}
            />
          </Card.Content>
        </Form.Field>
      </Card>
    );
  }

render() {
    const { optimized } = this.props;

    const FormikField = optimized ? FastField : Field;
    return <FormikField name="" component={this.renderAccordion} />;
  }

Recovery = () => {
  const styles = useStyles();
  const { t, i18n } = useTranslation();
  const language = i18n.language === 'ua' ? 0 : 1;
  const [shouldValidate, setShouldValidate] = useState(false);

  const { error, userRecovered, recoveryLoading } = useSelector(({ User }) => ({
    recoveryLoading: User.recoveryLoading,
    error: User.error,
    userRecovered: User.userRecovered
  }));

  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(userHasRecovered(false));
    dispatch(resetState());
  }, [dispatch]);

  const handleRecovery = async ({ email }) => {
    email && dispatch(recoverUser({ email, language, redirect: true }));
  };

  const successWindow = (
    <div>
      <h2 className={styles.heading}>{t('recovery.successTitle')}</h2>
      <p className={styles.recoveryText}>{t('recovery.successText')}</p>
    </div>
  );

  const validationSchema = Yup.object({
    email: Yup.string().email(t('error.profile.email'))
  });

  return (
    <Formik
      onSubmit={handleRecovery}
      initialValues={{ email: '' }}
      validationSchema={validationSchema}
      validateOnBlur={shouldValidate}
      validateOnChange={shouldValidate}
    >
      {({ errors, handleChange }) => (
        <AuthWrapper>
          {userRecovered || recoveryLoading ? (
            handleRecoveryLoaderOrWindow(userRecovered, successWindow)
          ) : (
            <Form className={styles.background}>
              <AuthHeading>{t('recovery.recoveryTitle')}</AuthHeading>
              <Field
                name='email'
                as={TextField}
                type='text'
                label={t('recovery.recoveryEmail')}
                className={`${styles.emailInput} ${handleClass(errors.email, styles.helperEmail)}`}
                variant='outlined'
                fullWidth
                onChange={(e) => handleChange(e) || (error && dispatch(resetState()))}
                helperText={handleHelperText(errors.email, error)}
                error={!!errors.email || !!error}
                color={MATERIAL_UI_COLOR.PRIMARY}
              />

              <p className={styles.recoveryText}>{t('recovery.recoveryText')}</p>
              <AuthButton onclick={() => setShouldValidate(true)}>
                {t('recovery.recoveryButtonText')}
              </AuthButton>
            </Form>
          )}
        </AuthWrapper>
      )}
    </Formik>
  );
}

DoubleDateFilter = (props) => {
  const { rawItemsList, setFilteredItemsList, component } = props;
  let initialStartDate = `${new Date().getFullYear()}-01-01`;
  let initialFinishDate = `${commonHelpers.transformDateTime({}).reverseDate}`;
  let rawList;

  switch(component){
    case 'lessons': {
      rawList = rawItemsList.map(item => {
        const lessonDate = commonHelpers.transformDateTime({dateTime: item.lessonDate}).formInitialValue;
        return item = {...item, 
          startDate: lessonDate, 
          finishDate: lessonDate};
      });
      const d = new Date();
      d.setDate(d.getDate() - 15);
      initialStartDate = `${commonHelpers.transformDateTime({dateTime:d}).reverseDate}`;
      break;
    }
    default: {
      rawList = rawItemsList;
      break;
    }
  }


  const validate = ({ startDate, finishDate }) => startDate > finishDate && {startDate: ' ', finishDate: ' '};

  const filterByDate = ({ startDate, finishDate }) => {
    const newArray = rawList
      .filter((item) => {
        return (new Date(item.startDate.slice(0, 10)) >= new Date(startDate)) 
        && (new Date(item.finishDate.slice(0, 10)) <= new Date(finishDate))
      }
    );

    setFilteredItemsList(newArray);
  };

  return (
    <Formik
      initialValues={{
        startDate: initialStartDate,
        finishDate: initialFinishDate,
      }}
      validate={validate}
      onSubmit={filterByDate}
      >
      {({ errors }) => (
        <Form name="start-group" className="row d-flex">
            <div className="col-5">
              <Field
                className={classNames('form-control', { 'border-danger': errors.startDate })}
                type="date"
                name="startDate"
                id="startDate"
              />
            </div>
            <div className="col-5">
              <Field
                className={classNames('form-control', { 'border-danger': errors.finishDate })}
                type="date"
                name="finishDate"
                id="finishDate"
              />
          </div>
          <div className="col-2 text-right">
            <Button type="submit">
              Filter
            </Button>
          </div>
        </Form>
      )}
    </Formik>
  )
}

ElRewardsVault = () => {
  const { api } = useAragonApi()
  const { elRewardsVault } = useAppState()

  const [sidePanelOpen, setSidePanelOpen] = useState(false)
  const openSidePanel = () => setSidePanelOpen(true)
  const closeSidePanel = () => setSidePanelOpen(false)

  const submit = ({ vault }) => {
    api
      .setELRewardsVault(vault)
      .toPromise()
      .catch(console.error)
      .finally(closeSidePanel)
  }

  return (
    <ListItem label="EL Rewards Vault">
      <Controls>
        <LoadableElement value={elRewardsVault}>
          <IdentityBadge entity={elRewardsVault} />
        </LoadableElement>
        <IconButton label="edit" icon={<IconEdit />} onClick={openSidePanel} />
      </Controls>
      <SidePanel
        opened={sidePanelOpen}
        title="Change EL Rewards Vault"
        onClose={closeSidePanel}
      >
        <InfoSpaced title="Action">
          Set a new address for the execution layer rewards vault contract.
        </InfoSpaced>
        <Formik
          initialValues={initialValues}
          validationSchema={validationSchema}
          validateOnBlur={false}
          validateOnChange={false}
          onSubmit={submit}
        >
          {({ submitForm, isSubmitting, isValidating }) => {
            const handleSubmit = (event) => {
              event.preventDefault()
              submitForm()
            }

            return (
              <Form onSubmit={handleSubmit}>
                <Field
                  name={fieldName}
                  type="text"
                  label="Vault"
                  component={TextField}
                />
                <Button
                  mode="strong"
                  wide
                  required
                  disabled={isValidating || isSubmitting}
                  label="Set EL rewards vault"
                  type="submit"
                />
              </Form>
            )
          }}
        </Formik>
      </SidePanel>
    </ListItem>
  )
}

export function LoginForm({ onSubmit }) {
  return (
    <div className="container page">
      <div className="row">
        <div className="col-md-6 offset-md-3 col-xs-12">
          <h1 className="text-xs-center">Sign in</h1>
          <p className="text-xs-center">
            <Link href="/register">
              <a>Need an account?</a>
            </Link>
          </p>
          <Formik
            validationSchema={validationSchema}
            initialStatus={[]}
            initialValues={{ input: { email: '', password: '' } }}
            onSubmit={onSubmit}
          >
            <Form>
              <ul className="error-messages">
                <ErrorMessage component="li" name="input.email" />
                <ErrorMessage component="li" name="input.password" />
                <FormikStatusErrors />
              </ul>
              <fieldset className="form-group">
                <label>Email</label>
                <Field
                  name="input.email"
                  className="form-control form-control-lg"
                  type="text"
                  placeholder="[email protected]"
                  autoComplete="email"
                />
              </fieldset>
              <fieldset className="form-group">
                <label>Password</label>
                <Field
                  name="input.password"
                  className="form-control form-control-lg"
                  type="password"
                  placeholder="A strong password"
                  autoComplete="current-password"
                />
              </fieldset>
              <FormikSubmitButton className="btn btn-lg btn-primary pull-xs-right">
                Sign in
              </FormikSubmitButton>
            </Form>
          </Formik>
        </div>
      </div>
    </div>
  );
}

FormField = ({ name, type = 'text', placeholder }) => (

    <label>
        <Field name={name} type={type} placeholder={placeholder} maxLength={20} />
    </label>
)

SearchForm = ({
  theme,
  handleSubmit,
  handleFormFocus,
  handleFormChange,
  getFieldMeta,
  handleReset,
  values,
}) => {
  const styling = styles(theme)
  const { t } = useTranslation()

  const formFocus = getFieldMeta('searchToken').touched
  const formChange = path(['searchToken', 'length'])(values)

  const close = (event) => {
    handleReset()
  }

  useEffect(() => {
    handleFormFocus(formFocus)
  }, [formFocus])
  useEffect(() => {
    handleFormChange(formChange)
  }, [formChange])
  useDebounce(() => {
    if (formChange) handleSubmit()
  }, 500, [formChange])

  return (
    <View style={styling.root}>
      <View style={styling.input}>
        <Field name="searchToken" component={TextField} placeholder={t('Search')} onSubmitEditing={handleSubmit} hideError />
      </View>
      {formFocus ?
        <TouchableOpacity style={styling.icon} onPress={close}>
          <CloseIcon />
        </TouchableOpacity>
      : null}
    </View>
  )
}

FormField = ({ name, label, type = 'text' }) => (
  <label>
    {label}
    <Field name={name} type={type} />
    <ErrorMessage className="error" component="div" name={name} />
  </label>
)