Add Initial Values

Step 7: Initialize values for the inputs

After integrating Formik into our form component, we can initialize the input fields with predefined values. This step allows us to set default values for the form fields and provide a better user experience.

js
Kopioi koodi
99
1
2
3
4
5
6
7
8
9
10
11
12
const formik = useFormik({
  initialValues: {
    username: "AJ",
    occupation: "",
  },
  onSubmit: (values) => {
    // Handle form submission
  },
  validate: (values) => {
    // Perform form field validation
  },
});

Code explanation: (Line 2-5) We set the username field to AJ and leave the occupation field empty as the initial values. When the form renders, the first input field will display the value AJ by default.

Note

In this example, we used the value AJ for the username field for training purposes. In a real-world scenario, it's recommended to avoid prefilling sensitive or personally identifiable information by default.

Complete code

Feel free to explore the code to understand better how the form field value initialization works.