useForm

The useForm hook allows you to create flexible form components that behave consistent across devices and browsers. The hook provides your component with various methods to update the form state and handle submissions.

Features

Anatomy

Example

function Example() {
  const initialValues = { fruit: 'Apple', count: 1 };

  const validationSchema = object({
    fruit: string().required(),
    count: number().required().positive()
  });

  const onSubmit = (values) => {
    window.alert(JSON.stringify(values));
    return values;
  };

  const {
    values,
    handleSubmit,
    handleReset,
    handleChange,
    handleBlur,
    ...state
  } = useForm({
    initialValues,
    onSubmit,
    validationSchema,
    validationMode: ['onSubmit', 'onChange', 'onBlur']
  });

  return (
    <>
      <Form onSubmit={handleSubmit} onReset={handleReset}>
        <Header>
          <Heading>Form Example</Heading>
        </Header>
        <Content>
          <input
            name="fruit"
            defaultValue={values.fruit}
            onChange={handleChange}
            onBlur={handleBlur}
          />
          <input
            name="count"
            defaultValue={values.count}
            onChange={handleChange}
            onBlur={handleBlur}
          />
        </Content>
        <Footer>
          <button type="submit">
            Submit
          </button>
          <button type="reset">
            Reset
          </button>
        </Footer>
      </Form>
      <div>
        {JSON.stringify({ ...state, values })}
      </div>
    </>
  );
}

function Example() {
  const initialValues = { fruit: 'Apple', count: 1 };

  const validationSchema = object({
    fruit: string().required(),
    count: number().required().positive()
  });

  const onSubmit = (values) => {
    window.alert(JSON.stringify(values));
    return values;
  };

  const {
    values,
    handleSubmit,
    handleReset,
    handleChange,
    handleBlur,
    ...state
  } = useForm({
    initialValues,
    onSubmit,
    validationSchema,
    validationMode: ['onSubmit', 'onChange', 'onBlur']
  });

  return (
    <>
      <Form onSubmit={handleSubmit} onReset={handleReset}>
        <Header>
          <Heading>Form Example</Heading>
        </Header>
        <Content>
          <input
            name="fruit"
            defaultValue={values.fruit}
            onChange={handleChange}
            onBlur={handleBlur}
          />
          <input
            name="count"
            defaultValue={values.count}
            onChange={handleChange}
            onBlur={handleBlur}
          />
        </Content>
        <Footer>
          <button type="submit">
            Submit
          </button>
          <button type="reset">
            Reset
          </button>
        </Footer>
      </Form>
      <div>
        {JSON.stringify({ ...state, values })}
      </div>
    </>
  );
}

function Example() {
  const initialValues = {
    fruit: 'Apple',
    count: 1
  };

  const validationSchema =
    object({
      fruit: string()
        .required(),
      count: number()
        .required()
        .positive()
    });

  const onSubmit = (
    values
  ) => {
    window.alert(
      JSON.stringify(
        values
      )
    );
    return values;
  };

  const {
    values,
    handleSubmit,
    handleReset,
    handleChange,
    handleBlur,
    ...state
  } = useForm({
    initialValues,
    onSubmit,
    validationSchema,
    validationMode: [
      'onSubmit',
      'onChange',
      'onBlur'
    ]
  });

  return (
    <>
      <Form
        onSubmit={handleSubmit}
        onReset={handleReset}
      >
        <Header>
          <Heading>
            Form Example
          </Heading>
        </Header>
        <Content>
          <input
            name="fruit"
            defaultValue={values
              .fruit}
            onChange={handleChange}
            onBlur={handleBlur}
          />
          <input
            name="count"
            defaultValue={values
              .count}
            onChange={handleChange}
            onBlur={handleBlur}
          />
        </Content>
        <Footer>
          <button type="submit">
            Submit
          </button>
          <button type="reset">
            Reset
          </button>
        </Footer>
      </Form>
      <div>
        {JSON.stringify({
          ...state,
          values
        })}
      </div>
    </>
  );
}